{% extends '_base_list.html' %}
{% load i18n static %}
{% block table_search %}
{% endblock %}
{% block custom_head_css_js %}
{% endblock %}
{% block table_container %}
<table class="table table-striped table-bordered table-hover " id="login_confirm_ticket_list_table" >
    <thead>
        <tr>
            <th class="text-center">
                <input id="" type="checkbox" class="ipt_check_all">
            </th>
            <th class="text-center">{% trans 'Title' %}</th>
            <th class="text-center">{% trans 'User' %}</th>
            <th class="text-center">{% trans 'Status' %}</th>
            <th class="text-center">{% trans 'Datetime' %}</th>
            <th class="text-center">{% trans 'Action' %}</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div id="actions" class="hide">
   <div class="input-group">
       <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
           <option value="approve">{% trans 'Approve selected' %}</option>
           <option value="reject">{% trans 'Reject selected' %}</option>
       </select>
       <div class="input-group-btn pull-left" style="padding-left: 5px;">
           <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
            {% trans 'Submit' %}
           </button>
       </div>
   </div>
</div>
{% include '_filter_dropdown.html' %}
{% endblock %}
{% block content_bottom_left %}{% endblock %}
{% block custom_foot_js %}
<script>
var ticketTable = 0;
function initTable() {
     var options = {
        ele: $('#login_confirm_ticket_list_table'),
        oSearch: {sSearch: "status:open"},
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                cellData = htmlEscape(cellData);
                var detailBtn = '<a href="{% url "tickets:login-confirm-ticket-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                $(td).html(detailBtn.replace("{{ DEFAULT_PK }}", rowData.id));
            }},
            {targets: 3, createdCell: function (td, cellData, rowData) {
                if (cellData === "approve") {
                    $(td).html('<i class="fa fa-check text-navy"></i>')
                } else if (cellData === "reject") {
                    $(td).html('<i class="fa fa-times text-danger"></i>')
                } else if (cellData === "open") {
                    $(td).html('<i class="fa fa-spinner text-info"></i>')
                } else {
                    $(td).html('<i class="fa fa-circle text-info"></i>')
                }
             }},
            {targets: 4, createdCell: function (td, cellData) {
                var d = toSafeLocalDateStr(cellData);
                $(td).html(d)
             }},
            {targets: 5, createdCell: function (td, cellData, rowData) {
                var acceptBtn = '<a class="btn btn-xs btn-info btn-action" data-action="approve" data-uid="{{ DEFAULT_PK }}" >{% trans "Approve" %}</a> ';
                var rejectBtn = '<a class="btn btn-xs btn-danger btn-action" data-action="reject" data-uid="{{ DEFAULT_PK }}" >{% trans "Reject" %}</a>';
                    acceptBtn = acceptBtn.replace('{{ DEFAULT_PK }}', cellData);
                    rejectBtn = rejectBtn.replace('{{ DEFAULT_PK }}', cellData);
                var acceptBtnRef = $(acceptBtn);
                var rejectBtnRef = $(rejectBtn);
                if (rowData.action !== "") {
                    acceptBtnRef.attr('disabled', 'disabled');
                    rejectBtnRef.attr('disabled', 'disabled');
                }
                var btn = acceptBtnRef.prop('outerHTML') + ' ' + rejectBtnRef.prop('outerHTML');
                $(td).html(btn)
             }}],
        ajax_url: '{% url "api-tickets:login-confirm-ticket-list" %}',
        columns: [
            {data: "id"}, {data: "title"},
            {data: "user_display"},
            {data: "action", width: "40px"},
            {data: "date_created", width: "120px"},
            {data: "id", orderable: false}
        ],
        op_html: $('#actions').html()
    };
    ticketTable = jumpserver.initServerSideDataTable(options);
    return ticketTable
}

$(document).ready(function(){
    initTable();
    var menu = [
        {title: "IP", value: "ip"},
        {title: "{% trans 'Title' %}", value: "title"},
        {title: "{% trans 'User' %}", value: "user_display"},
        {title: "{% trans 'Status' %}", value: "status", submenu: [
                {title: "{% trans 'Open' %}", value: "open"},
                {title: "{% trans 'Closed' %}", value: "closed"},
        ]},
        {title: "{% trans 'Action' %}", value: "action", submenu: [
                {title: "{% trans 'Approve' %}", value: "approve"},
                {title: "{% trans 'Reject' %}", value: "reject"},
        ]},
    ];
    initTableFilterDropdown('#login_confirm_ticket_list_table_filter input', menu)
}).on('click', '.btn-action', function () {
    var ticketId = $(this).data("uid");
    var action = $(this).data('action');
    var ticketDetailUrl = "{% url 'api-tickets:login-confirm-ticket-detail' pk=DEFAULT_PK %}";
        ticketDetailUrl = ticketDetailUrl.replace("{{ DEFAULT_PK }}", ticketId);
    var data = {
            url: ticketDetailUrl,
            body: JSON.stringify({action: action}),
            method: "PATCH",
            success: reloadPage
    };
    requestApi(data);
}).on('click', '#btn_bulk_update', function () {
    var action = $('#slct_bulk_update').val();
    var idList = ticketTable.selected;
    if (idList.length === 0) {
        return false;
    }
    var theUrl = "{% url 'api-tickets:login-confirm-ticket-list' %}";

    function doAction(action) {
        var data = [];
        $.each(idList, function(index, object_id) {
            var obj = {
                "pk": object_id, "action": action
            };
            data.push(obj);
        });
        requestApi({
            url: theUrl,
            method: 'PATCH',
            body: JSON.stringify(data),
            success: function (){
                $(".ipt_check_all").prop("checked", false)
                ticketTable.ajax.reload();
            }
        });
    }
    doAction(action)
})
</script>
{% endblock %}

