{% extends "helpdesk/base.html" %}
{% load i18n humanize %}
{% load static from staticfiles %}

{% block helpdesk_title %}{% trans "Tickets" %}{% endblock %}

{% block helpdesk_head %}

{% endblock %}


{% block h1_title %}Tickets
    {% if from_saved_query %} [{{ saved_query.title }}]{% endif %}
{% endblock %}


{% block helpdesk_breadcrumb %}
<li class="breadcrumb-item">
    <a href="{% url 'helpdesk:list' %}">{% trans "Tickets" %}</a>
</li>
{% if from_saved_query and saved_query.user == user %}
<li class="breadcrumb-item">{% trans "Saved Query" %}</li>
<li class="breadcrumb-item active">{{ saved_query.title }}</li>
{% else %}
<li class="breadcrumb-item active">Overview</li>
{% endif %}
{% endblock %}


{% block helpdesk_body %}
{% load in_list %}

<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-hand-pointer"></i>
        {% trans "Query Selection" %}
    </div>
    <div class="card-body">
        <!-- start accordion -->
        <div class="accordion" id="queryAccordion">
            <div class="card">
                <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <i class="fas fa-question-circle"></i>
                    <strong>{% trans "Change Query" %}</strong>
                    </button>
                </h5>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#queryAccordion">
                <div class="card-body">
                    <form>
                        <select name='select' id='filterBuilderSelect'>
                            <option value='Sort'>{% trans "Sorting" %}</option>
                            <option value='Owner'>{% trans "Owner" %}</option>
                            <option value='Queue'>{% trans "Queue" %}</option>
                            <option value='Status'>{% trans "Status" %}</option>
                            <option value='Keywords'>{% trans "Keywords" %}</option>
                            <option value='Dates'>{% trans "Date Range" %}</option>
                        </select>
                        <button class='btn btn-success btn-xs' id='filterBuilderButton'><i class="fas fa-plus-circle"></i></button>
                    {% csrf_token %}</form>
                            
                    <form method='get' action='./'>
                        <div class='thumbnail filterBox{% if query_params.sorting %} filterBoxShow{% endif %}' id='filterBoxSort'>
                        <label for='id_sort'>{% trans "Sorting" %}</label>
                        <select id='id_sort' name='sort'>
                            <option value='created'{% ifequal query_params.sorting "created"%} selected='selected'{% endifequal %}>
                                {% trans "Created" %}
                            </option>
                            <option value='title'{% ifequal query_params.sorting "title"%} selected='selected'{% endifequal %}>
                                {% trans "Title" %}
                            </option>
                            <option value='queue'{% ifequal query_params.sorting "queue"%} selected='selected'{% endifequal %}>
                                {% trans "Queue" %}
                            </option>
                            <option value='status'{% ifequal query_params.sorting "status"%} selected='selected'{% endifequal %}>
                                {% trans "Status" %}
                            </option>
                            <option value='priority'{% ifequal query_params.sorting "priority"%} selected='selected'{% endifequal %}>
                                {% trans "Priority" %}
                            </option>
                            <option value='assigned_to'{% ifequal query_params.sorting "assigned_to"%} selected='selected'{% endifequal %}>
                                {% trans "Owner" %}
                            </option>
                        </select>
                        <label for='id_sortreverse'>{% trans "Reverse" %}</label>
                        <input type='checkbox' name='sortreverse' id='id_sortreverse'{% if query_params.sortreverse %} checked='checked'{% endif %} />
                        <p class='filterHelp'>{% trans "Ordering applied to tickets" %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button>
                        </div>

                        <div class='thumbnail filterBox{% if query_params.filtering.assigned_to__id__in %} filterBoxShow{% endif %}' id='filterBoxOwner'>
                        <label for='id_owners'>{% trans "Owner(s)" %}</label>
                        <select id='id_owners' name='assigned_to' multiple='selected' size='5'>
                            {% for u in user_choices %}
                            <option value='{{ u.id }}'{% if u.id|in_list:query_params.filtering.assigned_to__id__in %} selected='selected'{% endif %}>
                                {{ u.get_username }}{% ifequal u user %} {% trans "(ME)" %}{% endifequal %}
                            </option>
                            {% endfor %}
                        </select>
                        <p class='filterHelp'>{% trans "Ctrl-Click to select multiple options" %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button></a>
                        </div>

                        <div class='thumbnail filterBox{% if query_params.filtering.queue__id__in %} filterBoxShow{% endif %}' id='filterBoxQueue'>
                        <label for='id_queues'>{% trans "Queue(s)" %}</label><select id='id_queues' name='queue' multiple='selected' size='5'>{% for q in queue_choices %}<option value='{{ q.id }}'{% if q.id|in_list:query_params.filtering.queue__id__in %} selected='selected'{% endif %}>{{ q.title }}</option>{% endfor %}</select>
                        <p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button>
                        </div>

                        <div class='thumbnail filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}' id='filterBoxStatus'>
                        <label for='id_statuses'>{% trans "Status(es)" %}</label><select id='id_statuses' name='status' multiple='selected' size='5'>{% for s in status_choices %}<option value='{{ s.0 }}'{% if s.0|in_list:query_params.filtering.status__in %} selected='selected'{% endif %}>{{ s.1 }}</option>{% endfor %}</select>
                        <p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button>
                        </div>

                        <div class='thumbnail filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}' id='filterBoxDates'>
                        <label for='id_date_from'>{% trans "Date (From)" %}</label><input type='text' name='date_from' value='{{ query_params.filtering.created__gte }}' id='id_date_from' />
                        <label for='id_date_to'>{% trans "Date (To)" %}</label><input type='text' name='date_to' value='{{ query_params.filtering.created__lte }}' id='id_date_to' />
                        <p class='filterHelp'>{% trans "Use YYYY-MM-DD date format, eg 2018-01-30" %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button>
                        </div>

                        <div class='thumbnail filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
                        <label for='id_query'>{% trans "Keywords" %}</label><input type='text' name='q' value='{{ query }}' id='id_query' />
                        <p class='filterHelp'>{% trans "Keywords are case-insensitive, and will be looked for in the title, body and submitter fields." %}</p>
                        <button class='filterBuilderRemove btn btn-danger btn-xs'><i class="fas fa-trash-alt"></i></button>
                        </div>
                        <hr style='clear: both;' />
                        <input class="btn btn-primary" type='submit' value='{% trans "Apply Filter" %}' />
                        {% if from_saved_query and saved_query.user == user %}
                        <p>{% blocktrans with saved_query.title as query_name %}You are currently viewing saved query <strong>"{{ query_name }}"</strong>.{% endblocktrans %} <a href='{% url 'helpdesk:delete_query' saved_query.id %}'>{% trans "Delete Saved Query" %}</a></p>
                        {% endif %}
                        {% if from_saved_query %}
                        <p>{% blocktrans with saved_query.id as query_id %}<a href='../reports/?saved_query={{ query_id }}'>Run a report</a> on this query to see stats and charts for the data listed below.{% endblocktrans %}</p>
                        {% endif %}
                    {% csrf_token %}</form>
                </div>
                </div>
            </div> <!-- end card -->
                    
            <div class="card">
                <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <i class="fas fa-save"></i>
                    <strong>{% trans "Save Query" %}</strong>
                    </button>
                </h5>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#queryAccordion">
                <div class="card-body">
                    <form method='post' action='{% url 'helpdesk:savequery' %}'>
                        <input type='hidden' name='query_encoded' value='{{ urlsafe_query }}' />
                        <dl>
                            <dt><label for='id_title'>{% trans "Query Name" %}</label></dt>
                            <dd><input type='text' name='title' id='id_title' /></dd>
                            <dd class='form_help_text'>{% trans "This name appears in the drop-down list of saved queries. If you share your query, other users will see this name, so choose something clear and descriptive!" %}</dd>

                            <dt><label for='id_shared'>{% trans "Shared?" %}</label></dt>
                            <dd><input type='checkbox' name='shared' id='id_shared' /> {% trans "Yes, share this query with other users." %}</dd>
                            <dd class='form_help_text'>{% trans "If you share this query, it will be visible by <em>all</em> other logged-in users." %}</dd>

                        </dl>
                        <div class='buttons'>
                            <input class="btn btn-primary" type='submit' value='{% trans "Save Query" %}'>
                        </div>
                    {% csrf_token %}</form>
                </div>
                </div>
            </div> <!-- end card -->
                    
            <div class="card">
                <div class="card-header" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <i class="fas fa-clipboard-check"></i>
                    <strong>{% trans "Use Saved Query" %}</strong>
                    </button>
                </h5>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#queryAccordion">
                <div class="card-body">
                    <form method='get' action='{% url 'helpdesk:list' %}'>
                        <p><label for='id_query_selector'>{% trans "Query" %}</label><select name='saved_query' id='id_query_selector'>
                            {% for q in user_saved_queries %}
                            <option value='{{ q.id }}'>{{ q.title }}{% if q.shared %} (Shared{% ifnotequal user q.user %} by {{ q.user.get_username }}{% endifnotequal %}){% endif %}</option>
                            {% endfor %}
                        </select></p>
                        <input class="btn btn-primary" type='submit' value='{% trans "Run Query" %}'>
                    {% csrf_token %}</form>
                </div>
                </div>
            </div> <!-- end card -->
        </div>
        <!-- end accordion -->
    </div>
    <!-- end card-body -->
</div>
<!-- end top card -->


<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-table"></i>
        {% trans "Query Results" %}
    </div>
    <div class="card-body">
        {{ search_message|safe }}
        <form method='post' action='{% url 'helpdesk:mass_update' %}' id="ticket_mass_update">
            <table width="100%" class="table table-striped table-bordered table-hover" id="ticketTable" data-page-length='{{ default_tickets_per_page }}'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>&nbsp;</th>
                        <th>{% trans "Pr" %}</th>
                        <th>{% trans "Title" %}</th>
                        <th>{% trans "Queue" %}</th>
                        <th>{% trans "Status" %}</th>
                        <th>{% trans "Created" %}</th>
                        <th>{% trans "Due Date" %}</th>
                        <th>{% trans "Owner" %}</th>
                    </tr>
                </thead>
                {% if not server_side %}
                {% include 'helpdesk/ticket_list_table.html' %}
                {% endif %}
            </table>

            <p><label>{% trans "Select:" %} </label>
            
                <button id="select_all_btn" type="button" class="btn btn-primary btn-sm" />
                <i class="fas fa-check-circle"></i>&nbsp;{% trans "All" %}
                </button>
                
                <button id='select_none_btn' type="button" class="btn btn-primary btn-sm"><i class="fas fa-times-circle"></i>&nbsp;{% trans "None" %}</button>
                
                <button id='select_inverse_btn' type="button" class="btn btn-primary btn-sm"><i class="fas fa-expand-arrows-alt"></i>&nbsp;{% trans "Invert" %}</button>
            </p>

            <p>
                <label for='id_mass_action'>{% trans "With Selected Tickets:" %}</label>
                <select name='action' id='id_mass_action'>
                    <option value='take'>{% trans "Take (Assign to me)" %}</option>
                    <option value='delete'>{% trans "Delete" %}</option>
                    <optgroup label='{% trans "Close" %}'>
                        <option value='close'>{% trans "Close (Don't Send E-Mail)" %}</option>
                        <option value='close_public'>{% trans "Close (Send E-Mail)" %}</option>
                    </optgroup>
                    <optgroup label='{% trans "Assign To" %}'>
                        <option value='unassign'>{% trans "Nobody (Unassign)" %}</option>
                        {% for u in user_choices %}<option value='assign_{{ u.id }}'>{{ u.get_username }}</option>{% endfor %}
                    </optgroup>
                </select>
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-arrow-circle-right"></i>&nbsp;{% trans "Go" %}</button>
            </p>
        {% csrf_token %}</form>
    </div>
    <!-- /.panel-body -->
</div>
<!-- /.panel -->

{% endblock %}


{% block helpdesk_js %}
<script src='{% static "helpdesk/filter.js" %}'></script>
<script>
    {% if not server_side %}
        $('#ticketTable').DataTable({
          "language": {
              "emptyTable": "{% trans 'No Tickets Match Your Selection' %}"
          },
          "order": [],
          responsive: true
        });
    {% else %}
        $(document).ready(function()
        {
          let url = ""
            //DataTables Initialization
            let tasks_table = $('#ticketTable').DataTable({
                "language": {
                    "emptyTable": "{% trans 'No Tickets Match Your Selection' %}"
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{% url 'helpdesk:datatables_ticket_list' %}",
                    "type": "GET",
                },
                createdRow: function( row, data, dataIndex )
                {
                    $( row ).addClass(data.row_class);
                },

                "columns": [
                  {"data": "ticket",
                    "render": function (data, type, row, meta)
                    {
                        var id = data.split(" ")[0];
                        var name = data.split(" ")[1];
                        let url = "{% url 'helpdesk:view' 1234 %}".replace(/1234/, id.toString());
                        if (type === 'display')
                        {
                          data = '<b><a href="' + url + '" >' + name + '</a></b>';
                        }
                        return data
                    }
                  },
                  {"data": "id",
                    "orderable": false,
                    "render": function(data, type, row, meta)
                    {
                      var pk = data;
                      if(type === 'display'){
                        data = "<input type='checkbox' name='ticket_id' value='"+pk+"'"+ "class='ticket_multi_select' />"
                      }
                        return data
                      }
                  },
                  {"data": "priority"},
                  {"data": "title",
                    "render": function (data, type, row, meta)
                    {
                      if (type === 'display')
                      {
                        data = '<b><a href="' + url + '" >' + data + '</a></b>';
                      }
                      return data
                    }
                  },
                  {"data": "queue"},
                  {"data": "status"},
                  {"data": "created"},
                  {"data": "due_date"},
                  {"data": "assigned_to"},
                ]
            });
          })
    {% endif %}
    $(document).ready(function()
    {
        $("#select_all_btn").click(function() {
            $(".ticket_multi_select").prop('checked', true);
        });
        $("#select_none_btn").click(function() {
            $(".ticket_multi_select").prop('checked', false);
        });
        $("#select_inverse_btn").click(function() {
            $(".ticket_multi_select").each(function() {
                $(this).prop('checked', !$(this).prop('checked'));
            });
        });
    })
</script>
{% endblock %}

