{% extends 'base.html' %}
{% load humanize %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    {% load static %}
    <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}" />
{% endblock %}
{% block title %}Maintenance{% endblock %}
{% block body %}
    <div class="container-fluid">
        <h1 class="pull-left" style="margin-right:20px; margin-top:0; margin-bottom:0">Maintenance</h1>
        <ul class="nav nav-pills" id="tabs">
            <li class="{% if not tab or tab == 'pending' %}active{% endif %}">
                <a href="#pending">Pending</a>
            </li>
            <li class="{% if tab == 'closed' %}active{% endif %}">
                <a href="#closed">Closed</a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div id="pending" class="tab-pane {% if not tab or tab == 'pending' %}active{% endif %}">
            <div class="split-screen-left-panel">
                <div class="form-inline" style="margin: 15px;">
                    <label class="form-group control-label text-left" for="tool_category_search_pending">Tool category:</label>
                    <div class="form-group" style="display: inline-block;margin-left: 15px;width: 60%; min-width: 150px;">
                        <input id="tool_category_search_pending"
                               type="text"
                               class="form-group form-control tool-category-search"
                               placeholder="Filter by tool category"
                               value="{{ tool_category|default_if_none:'' }}"
                               style="width: 100%" />
                    </div>
                </div>
                <table id="pending_tasks" class="table table-hover">
                    <thead>
                        <tr>
                            <th>
                                <a href="{% url 'maintenance' sort_by='urgency' %}">Urgency</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='force_shutdown' %}">Severity</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='tool' %}">Tool</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='tool___category' %}">Tool category</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='problem_category' %}">Problem category</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='last_updated' %}">Last updated</a>
                            </th>
                            <th>
                                <a href="{% url 'maintenance' sort_by='creation_time' %}">Created</a>
                            </th>
                            <th>
                                {% if customizations|get_item:"tool_problem_title_enabled" == "enabled" %}
                                    Title/Description
                                {% else %}
                                    Description
                                {% endif %}
                            </th>
                        </tr>
                    </thead>
                    {% for task in pending_tasks %}
                        <tr onclick="pending_task_details(this, '{% url 'task_details' task.id %}')"
                            data-task-id="{{ task.id }}">
                            <td>{{ task.get_urgency_display }}</td>
                            <td>
                                {% if task.force_shutdown %}
                                    <span class="glyphicon glyphicon-fire danger-highlight"></span>
                                {% else %}
                                    <span class="glyphicon glyphicon-wrench warning-highlight"></span>
                                {% endif %}
                            </td>
                            <td>{{ task.tool.name }}</td>
                            <td>{{ task.tool.category }}</td>
                            <td>{{ task.problem_category|default_if_none:"" }}</td>
                            <td>
                                {% if task.last_updated and task.last_updated_by %}
                                    {{ task.last_updated|naturaltime }} by {{ task.last_updated_by.first_name }}
                                {% endif %}
                            </td>
                            <td>{{ task.creation_time|naturaltime }}</td>
                            <td>
                                <span class="maintenance-task-title" title="{{ task.title_or_description }}">{{ task.title_or_description }}</span>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="pending_task_details" class="split-screen-right-panel"></div>
        </div>
        <div id="closed" class="tab-pane {% if tab == 'closed' %}active{% endif %}">
            <div class="split-screen-left-panel">
                <div class="form-inline" style="margin: 15px;">
                    <label class="form-group control-label text-left" for="tool_category_search_closed">Tool category:</label>
                    <div class="form-group" style="display: inline-block;margin-left: 15px;width: 60%; min-width: 150px;">
                        <input id="tool_category_search_closed"
                               type="text"
                               class="form-group form-control tool-category-search"
                               placeholder="Filter by tool category"
                               value="{{ tool_category|default_if_none:'' }}"
                               style="width: 100%" />
                    </div>
                </div>
                <table id="closed_tasks" class="table table-hover">
                    <thead>
                        <tr>
                            <th>Urgency</th>
                            <th>Severity</th>
                            <th>Tool</th>
                            <th>Tool category</th>
                            <th>Problem category</th>
                            <th>Created</th>
                            <th>Resolved</th>
                            <th>
                                {% if customizations|get_item:"tool_problem_title_enabled" == "enabled" %}
                                    Title/Description
                                {% else %}
                                    Description
                                {% endif %}
                            </th>
                        </tr>
                    </thead>
                    {% for task in closed_tasks %}
                        <tr onclick="closed_task_details(this, '{% url 'task_details' task.id %}')">
                            <td>{{ task.get_urgency_display }}</td>
                            <td>
                                {% if task.force_shutdown %}
                                    <span class="glyphicon glyphicon-fire danger-highlight"></span>
                                {% else %}
                                    <span class="glyphicon glyphicon-wrench warning-highlight"></span>
                                {% endif %}
                            </td>
                            <td>{{ task.tool.name }}</td>
                            <td>{{ task.tool.category }}</td>
                            <td>{{ task.problem_category|default_if_none:"" }}</td>
                            <td>{{ task.creation_time }}</td>
                            <td>{{ task.resolution_time }}</td>
                            <td>
                                <span class="maintenance-task-title" title="{{ task.title_or_description }}">{{ task.title_or_description }}</span>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="closed_task_details" class="split-screen-right-panel"></div>
        </div>
    </div>
    <script>
	function pending_task_details(row, url)
	{
		$("#pending_tasks tr").removeClass('active');
		$(row).addClass('active');
		$("#pending_task_details").html("Loading task details...").load(url, undefined, on_pending_task_details_failure);
		save_active_task();
	}

	function closed_task_details(row, url)
	{
		$("#closed_tasks tr").removeClass('active');
		$(row).addClass('active');
		$("#closed_task_details").html("Loading task details...").load(url, undefined, on_closed_task_details_failure);
	}

	function on_pending_task_details_failure(response, status, xml_header_request)
	{
		if(status === "error")
		{
			let message = "Unable to load task details.";
			if (xml_header_request.responseText)
				message += " " + xml_header_request.responseText;
			$("#pending_task_details").html(message)
		}
	}

	function on_closed_task_details_failure(response, status, xml_header_request)
	{
		if(status === "error")
		{
			let message = "Unable to load task details.";
			if (xml_header_request.responseText)
				message += " " + xml_header_request.responseText;
			$("#closed_task_details").html(message)
		}
	}

	function enable_tool(url)
	{
		$("#interlock").prop('disabled', true);
		let failure_dialog = ajax_failure_callback("Unable to enable tool");
		ajax_post(url, undefined, reload_maintenance_page, failure_dialog);
	}

	function disable_tool(url)
	{
		$("#interlock").prop('disabled', true);
		let failure_dialog = ajax_failure_callback("Unable to disable tool");
		ajax_post(url, undefined, reload_maintenance_page, failure_dialog);
	}

	function reload_maintenance_page(response, status, xml_http_request)
	{
		save_active_task();
		location.reload();
	}

	function save_active_task()
	{
		let active_row = $("#pending_tasks tr.active");
		localStorage['Maintenance page, active task'] = active_row.data('task-id');
	}

    function filter_tool_category(jquery_event, search_selection)
    {
        const this_url = new URL(window.location.href);
        this_url.searchParams.set("tool_category", search_selection.name);
        this_url.searchParams.set("tab", $("#tabs li.active a").attr("href").substring(1));
        window.location.href = this_url.toString();
    }

	function on_load()
	{
		$("#tabs a").click(switch_tab);
		let active_row = localStorage['Maintenance page, active task'];
		if(active_row)
		{
			let row = $("#pending_tasks tr[data-task-id='" + active_row + "']");
			row.click();
		}
        $(".tool-category-search")
        .autocomplete('tool_categories', filter_tool_category, {% json_search_base_with_extra_fields tool_categories %}, true)
        .on("input", function ()
        {
            if (!$(this).val())
            {
                filter_tool_category('', {'name': ''});
            }
        });

	}

	$(on_load);
    </script>
{% endblock %}