{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $("#workorder-task-activity-rep").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                position: { my: "center top", at: "center top", of: window },
                width: 1200,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'site:report-workorder-task-action' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_wo_task_id: $("#current_wo_task_id").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#workorder-task-activity-rep-content').html(data);
                        }
                    })
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });


            $("button[name^='btn-workorder-task-action-']").click(function (event) {
                $("#current_wo_task_id").val(get_icon_button_value(event));
                $('#workorder-task-activity-rep-content').html('Loading workorder task activity report data...');
                $("#workorder-task-activity-rep").dialog("open");
            });
        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <a href="{% url 'site:report-workorders' %}">Back To Workorder Report</a>
    <br/>
    <form id="reportWorkorderTasksForm" name="reportWorkorderTasksForm" method="POST">
        {% csrf_token %}
        <input type="hidden" name="current_wo_task_id" id="current_wo_task_id" value=""/>
        <table id="workorder-tasks-report-table" class="table table-bordered table-striped">
            <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
                <th>Task Id</th>
                <th>Req. Id</th>
                <th>Pack Count</th>
                <th>Type</th>
                <th>State</th>
                <th>Status</th>
                <th>Issued</th>
                <th>Start Time</th>
                <th>End Time</th>
                <th><i class="icon-th-list"></i></th>
            </tr>
            </thead>
            <tbody>
            {% for task in report_list %}
                <tr style="background-color: white;">
                    <td>{{ task.wo_task_id }}</td>
                    <td>{{ task.req_id }}</td>
                    <td>{{ task.package_count }}</td>
                    <td>{{ task.task_type.tag }}</td>
                    <td>{{ task.task_state.tag }}</td>
                    <td>{{ task.task_status.tag }}</td>
                    <td>{{ task.dts_create|date:"m/d/Y h:i:s A" }}</td>
                    <td>{{ task.dts_start|date:"m/d/Y h:i:s A" }}</td>
                    <td>{{ task.dts_state|date:"m/d/Y h:i:s A" }}</td>
                    <td>
                        <button class="btn btn-small btn-link" type="button"
                                id="btn-workorder-task-action-{{ task.wo_task_id }}"
                                name="btn-workorder-task-action-{{ task.wo_task_id }}"
                                value="{{ task.wo_task_id }}" title="Show Workorder Task Activity"><i
                                class="icon-file"></i></button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>
    <div id="workorder-task-activity-rep" title="Workorder Task Actions" style="margin-left: 2px;">
        <div id="workorder-task-activity-rep-content">
            Loading workorder task activity report data...
        </div>
    </div>
{% endblock %}