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

{% load i18n humanize static in_list %}

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

{% block helpdesk_head %}
    <!-- Timeline 3 CSS -->
    {% if helpdesk_settings.HELPDESK_USE_CDN %}
    <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
    {% else %}
    <link title="timeline-styles" rel="stylesheet" href="{% static 'helpdesk/vendor/timeline3/css/timeline.css' %}">
    {% endif %}
{% 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">{% trans "Overview" %}</li>
    {% endif %}
{% endblock %}


{% block helpdesk_body %}
    <div class="card">
        {% if helpdesk_settings.HELPDESK_TICKETS_TIMELINE_ENABLED %}
        <div class="card-header">
            <ul class="nav nav-tabs">
                <li class="nav-item" style="width: 200px;">
                    {% trans "Query Results" %}:
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#datatabletabcontents" id="datatabletabcontents-tab"
                       data-toggle="tab" role="tab" aria-controls="datatabletabcontents" aria-selected=true>
                        <i class="fas fa-th-list"></i>
                        {% trans "Table" %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#timelinetabcontents" id="timelinetabcontents-tab" data-toggle="tab"
                       role="tab" aria-controls="timelinetabcontents" aria-selected=false>
                        <i class="fas fa-history"></i>
                        {% trans "Timeline" %}
                    </a>
                </li>
            </ul>
        </div>
        {% endif %}
        <div class="card-body">
            {{ search_message|safe }}
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="datatabletabcontents" role="tabpanel"
                     aria-labelledby="datatabletabcontents-tab">
                    <form method='post' action='{% url 'helpdesk:mass_update' %}' id="ticket_mass_update">
                        {% csrf_token %}
                        <table class="table table-sm table-striped table-bordered table-hover"
                               id="ticketTable" data-page-length='{{ default_tickets_per_page }}'>
                            <thead class="thead-light">
                            <tr>
                                <th></th>
                                <th>{% trans "Ticket" %}</th>
                                <th>{% trans "Priority" %}</th>
                                <th>{% trans "Queue" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Created" %}</th>
                                <th>{% trans "Due Date" %}</th>
                                <th>{% trans "Owner" %}</th>
                                <th>{% trans "Submitter" %}</th>
                                <th>{% trans "Last Followup" %}</th>
                                {% if helpdesk_settings.HELPDESK_ENABLE_TIME_SPENT_ON_TICKET %}<th>{% trans "Time Spent" %}</th>{% endif %}
                                {% if helpdesk_settings.HELPDESK_KB_ENABLED %}<th>{% trans "KB item" %}</th>{% endif %}
                            </tr>
                            </thead>
                        </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> {% trans "All" %}
                            </button>

                            <button id='select_none_btn' type="button" class="btn btn-primary btn-sm">
                                <i class="fas fa-times-circle"></i> {% trans "None" %}
                            </button>

                            <button id='select_inverse_btn' type="button" class="btn btn-primary btn-sm">
                                <i class="fas fa-expand-arrows-alt"></i> {% 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>
                                <option value='merge'>{% trans "Merge" %}</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 assignable_users %}
                                        <option value='assign_{{ u.id }}'>{{ u.get_username }}</option>
                                    {% endfor %}
                                </optgroup>
                                <optgroup label='{% trans "Set KB Item" %}'>
                                    <option value='kbitem_none'>{% trans "No KB Item" %}</option>
                                    {% for kbi in kb_items %}
                                        <option value='kbitem_{{ kbi.id }}'>{{ kbi.category.title }}: {{ kbi.title }}</option>
                                    {% endfor %}
                                </optgroup>
                            </select>
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fas fa-arrow-circle-right"></i> {% trans "Go" %}
                            </button>
                        </p>
                    </form>
                </div>
                {% if helpdesk_settings.HELPDESK_TICKETS_TIMELINE_ENABLED %}
                <div class="tab-pane fade" id="timelinetabcontents" role="tabpanel" aria-labelledby="timelinetabcontents-tab">
                    <div id='timeline-embed' style="width: 100%; height: 80vh"></div>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- /.panel-body -->
    </div>
    <!-- /.panel -->

    <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 btn-sm" type="button" data-toggle="collapse"
                                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <i class="fas fa-filter"></i>
                                {% trans "Filters" %}
                            </button>
                        </h5>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                         data-parent="#queryAccordion">
                        <div class="card-body">
                            <form method="get">
                                <div class="form-group float-right">
                                    <label for="filterBuilderSelect">{% trans "Add filter" %}:</label>
                                    <select class="custom-select custom-select-sm mb-0"
                                            aria-describedby="select-description" name="select" id="filterBuilderSelect"
                                            onChange="onFilterChange(this.value)">
                                        <option value="">--</option>
                                        <option id="filterBuilderSelect-Sort" value="Sort"{% if query_params.sorting %} disabled{% endif %}>
                                            {% trans "Sorting" %}
                                        </option>
                                        <option id="filterBuilderSelect-Priority" value="Priority"{% if query_params.filtering.priority__in %} disabled{% endif %}>
                                            {% trans "Priority" %}
                                        </option>
                                        <option id="filterBuilderSelect-Owner" value="Owner"{% if query_params.filtering.assigned_to__id__in or query_params.filtering_null.assigned_to__id__isnull %} disabled{% endif %}>
                                            {% trans "Owner" %}
                                        </option>
                                        <option id="filterBuilderSelect-Queue" value="Queue"{% if query_params.filtering.queue__id__in or query_params.filtering_null.queue__id__isnull %} disabled{% endif %}>
                                            {% trans "Queue" %}
                                        </option>
                                        <option id="filterBuilderSelect-Status" value="Status"{% if query_params.filtering.status__in %} disabled{% endif %}>
                                            {% trans "Status" %}
                                        </option>
                                        <option id="filterBuilderSelect-Keywords" value="Keywords"{% if query_params.search_string %} disabled{% endif %}>
                                            {% trans "Keywords" %}
                                        </option>
                                        <option id="filterBuilderSelect-Dates" value="Dates"{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} disabled{% endif %}>
                                            {% trans "Date Range" %}
                                        </option>
                                        <option id="filterBuilderSelect-KBItems" value="KBItems"{% if query_params.filtering.kbitem__in or query_params.filtering_null.kbitem__isnull %} disabled{% endif %}>
                                            {% trans "Knowledge base items" %}
                                        </option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <form method="get">
                            <ul class="list-group list-group-flush">
                                <li id="filterBoxSort"
                                    class="filterBox{% if query_params.sorting %} filterBoxShow{% endif %} list-group-item"
                                    id="filterBoxSort">
                                    {% include 'helpdesk/filters/sorting.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.filtering.priority__in %} filterBoxShow{% endif %}"
                                    id="filterBoxPriority">
                                    {% include 'helpdesk/filters/priority.html' %}
                                </li>
                                <li class="filterBox{% if query_params.filtering.assigned_to__id__in or query_params.filtering_null.assigned_to__id__isnull %} filterBoxShow{% endif %} list-group-item"
                                    id=filterBoxOwner>
                                    {% include 'helpdesk/filters/owner.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.filtering.queue__id__in or query_params.filtering_null.queue__id__isnull %} filterBoxShow{% endif %}"
                                    id="filterBoxQueue">
                                    {% include 'helpdesk/filters/queue.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}"
                                    id="filterBoxStatus">
                                    {% include 'helpdesk/filters/status.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}"
                                    id='filterBoxDates'>
                                    {% include 'helpdesk/filters/date.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.search_string %} filterBoxShow{% endif %}"
                                    id="filterBoxKeywords">
                                    {% include 'helpdesk/filters/keywords.html' %}
                                </li>
                                <li class="list-group-item filterBox{% if query_params.filtering.kbitem__in or query_params.filtering_null.kbitem__isnull %} filterBoxShow{% endif %}"
                                    id="filterBoxKBItems">
                                    {% include 'helpdesk/filters/kbitems.html' %}
                                </li>
                                <li class="list-group-item">
                                    <input class="btn btn-primary btn-sm" type='submit' value='{% trans "Apply Filters" %}'/>
                                </li>
                                {% if from_saved_query and saved_query.user == user %}
                                    <li class="list-group-item">
                                        {% 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>
                                    </li>
                                {% endif %}
                                {% if from_saved_query %}
                                    <li class="list-group-item">
                                        {% 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 %}
                                    </li>
                                {% endif %}
                            </ul>
                        </form>
                    </div>
                </div> <!-- end card -->

                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse"
                                    data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <i class="fas fa-save"></i>
                                {% trans "Save Query" %}
                            </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' %}'>
                                {% csrf_token %}
                                <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>
                            </form>
                        </div>
                    </div>
                </div> <!-- end card -->

                {% if user_saved_queries %}
                    <div class="card">
                        <div class="card-header" id="headingThree">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse"
                                        data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    <i class="fas fa-clipboard-check"></i>
                                    {% trans "Use Saved Query" %}
                                </button>
                            </h5>
                        </div>
                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                             data-parent="#queryAccordion">
                            <div class="card-body">
                                <form 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{% if user != q.user %} by {{ q.user.get_username }}{% endif %})
                                                {% endif %}
                                            </option>
                                        {% endfor %}
                                    </select></p>
                                    <input class="btn btn-primary" type='submit' value='{% trans "Run Query" %}'>
                                </form>
                            </div>
                        </div>
                    </div> <!-- end card -->
                {% endif %}
            </div>
            <!-- end accordion -->
        </div>
        <!-- end card-body -->
    </div>
    <!-- end top card -->

{% endblock %}


{% block helpdesk_js %}
    <script src='{% static "helpdesk/filter.js" %}'></script>
    <!-- Timeline 3 JavaScript -->
    {% if helpdesk_settings.HELPDESK_USE_CDN %}
    <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
    {% else %}
    <script src="{% static 'helpdesk/vendor/timeline3/js/timeline.js' %}"></script>
    {% endif %}

    <script>
        window.helpdesk_settings = {
            LANGUAGE_CODE: "{{ helpdesk_settings.LANGUAGE_CODE|default:'en-US' }}",
            NO_FOLLOWUP_TEXT: "{% trans helpdesk_settings.ALTERNATIVE_UI_STRINGS.No_followup_found|default:'No followup found' %}"
        };

        function get_url(row) {
            return "{% url 'helpdesk:view' 1234 %}".replace(/1234/, row.id.toString());
        }
        
        function htmlEntities(str) {
            return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }
        
        $(document).ready(function () {
            // Ticket DataTable Initialization
	    $.fn.dataTable.ext.errMode = function(settings, helpPage, message) {
		alert("{% trans 'Error fetching tickets occured, please contact the system administrators of this server providing the message below:\n    ' %}" + message)
	    };
            $('#ticketTable').DataTable({
                language: {
                    "emptyTable": "{% trans 'No Tickets Match Your Selection' %}"
                },
                processing: true,
                serverSide: true,
                ajax: {
                    "url": "{% url 'helpdesk:datatables_ticket_list' urlsafe_query %}",
                    "type": "GET",
                },
                createdRow: function (row, data, dataIndex) {
                    $(row).addClass(data.row_class);
                },
                dom: 'ltBp',
                buttons: ["colvis"],
                columns: [
                    {
                        data: "id",
                        orderable: false,
                        render: function (data, type, row, meta) {
                            const pk = data;
                            if (type === 'display') {
                                data = "<input type='checkbox' name='ticket_id' value='" + pk + "' class='ticket_multi_select' />"
                            }
                            return data
                        }
                    },
                    {
                        data: "ticket",
                        render: function (data, type, row, meta) {
                            if (type === 'display') {
                                data = '<div class="tickettitle"><a href="' + get_url(row) + '" >' +
                                    row.id + '. ' +
                                    htmlEntities(row.title) + '</a></div>';
                            }
                            return data
                        }
                    },
                    {
                        data: "priority",
                        render: function (data, type, row, meta) {
                            let priorityClass = "text-secondary";
                            switch (data) {
                                case 1:
                                    priorityClass = "text-danger";
                                    break;
                                case 2:
                                    priorityClass = "text-warning";
                                    break;
                                case 3:
                                    priorityClass = "text-success";
                                    break;
                                case 4:
                                    priorityClass = "text-info";
                                    break;
                                case 5:
                                    priorityClass = "text-secondary";
                                    break;
                            }
                            return '<p class="' + priorityClass + '">' + data + '</p>';
                        },
                        visible: false,
                    },
                    {
                        data: "queue",
                        render: function (data, type, row, meta) {
                            return data.title;
                        },
                        visible: false,
                    },
                    {data: "status"},
                    {data: "created"},
                    {data: "due_date", "visible": false},
                    {
                        data: "assigned_to",
                        render: function (data, type, row, meta) {
                            if (data !== "None") {
                                return data;
                            }
                            return "";
                        }
                    },
                    {data: "submitter"},
                    {
                        data: "last_followup",
                        render: function (data, type, row) {
                            let locale = navigator.language || navigator.userLanguage || window.helpdesk_settings.LANGUAGE_CODE;
                            
                            if (isNaN(Date.parse(data))) {
                                return window.helpdesk_settings.NO_FOLLOWUP_TEXT;
                            }

                            let date = new Date(data);
                            return date.toLocaleString(locale, {
                                weekday: "short",
                                year: "numeric",
                                month: "long",
                                day: "numeric",
                                hour: "2-digit",
                                minute: "2-digit",
                                hour12: true
                            });
                        }
                    },
                    {% if helpdesk_settings.HELPDESK_ENABLE_TIME_SPENT_ON_TICKET %}
                    {data: "time_spent", "visible": false},
                    {% endif %}
                    {% if helpdesk_settings.HELPDESK_KB_ENABLED %}
                    {data: "kbitem"},
                    {% endif %}
                ],
                order: []
            });

            {# Timeline initialization when tab is displayed #}
            // The TL.Timeline constructor takes at least two arguments:
            // the id of the Timeline container (no '#'), and
            // the URL to your JSON data file or Google spreadsheet.
            // the id must refer to an element "above" this code,
            // and the element must have CSS styling to give it width and height
            // optionally, a third argument with configuration options can be passed.
            // See below for more about options.
            let timeline_loaded = false;
            $('#timelinetabcontents-tab').on('shown.bs.tab', function (e) {
                if (!timeline_loaded) {
                    new TL.Timeline(
                        'timeline-embed',
                        '{% url 'helpdesk:timeline_ticket_list' urlsafe_query %}'
                    );
                    timeline_loaded = true;
                }
            });

            {# Shortcuts to select/unselect multiple tickets #}
            $("#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 %}

