{% extends 'inactivity/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-target="#tab-pending-requests" aria-controls="tab-pending-requests" role="tab" data-bs-toggle="tab">
                {% translate "Pending" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-target="#tab-closed-requests" aria-controls="tab-closed-requests" role="tab" data-bs-toggle="tab">
                {% translate "Closed" %}
            </button>
        </li>
        <li class="nav-item ms-auto" role="presentation">
            <a class="btn btn-success" href="{% url 'inactivity:create_loa_request' %}" >
                {% translate "Create Request" %}
            </a>
        </li>
    </ul>

    <div class="card card-tabs">
        <div class="card-body">
            <div class="tab-content">

                <div role="tabcard" class="tab-pane active" id="tab-pending-requests">
                    <div class="table-responsive">
                        <table id="table-pending-requests" style="width: 100%;" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Submitted" %}</th>
                                    <th>{% translate "Start" %}</th>
                                    <th>{% translate "End" %}</th>
                                    <th>{% translate "Duration" %}</th>
                                    <th>{% translate "Description" %}</th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div role="tabcard" class="tab-pane" id="tab-closed-requests">
                    <div class="table-responsive">
                        <table id="table-closed-requests" style="width: 100%;" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Submitted" %}</th>
                                    <th>{% translate "Start" %}</th>
                                    <th>{% translate "End" %}</th>
                                    <th>{% translate "Duration" %}</th>
                                    <th>{% translate "Description" %}</th>
                                    <th>{% translate "Result" %}</th>
                                    <th>{% translate "Processed By" %}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>


{% endblock %}

{% block extra_javascript %}

    {% include "bundles/datatables-js-bs5.html" %}

    <script>
        "use strict";
        $(document).ready(function () {

            /* dataTable def */
            let lengthMenu =  [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"],
            ];

            $("#table-pending-requests").DataTable({
                ajax: {
                    url: '{% url "inactivity:my_open_requests_data" %}',
                    dataSrc: "data",
                    cache: false,
                },

                columns: [
                    {
                        data: 'created_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: "start" },
                    { data: "end" },
                    { data: "duration" },
                    { data: "notes" },
                    { data: "actions" },
                ],

                lengthMenu: lengthMenu,

                columnDefs: [
                    { sortable: false, targets: [5] }
                ],

                order: [
                    [0, "desc"],
                ],
            });

            $("#table-closed-requests").DataTable({
                ajax: {
                    url: '{% url "inactivity:my_completed_requests_data" %}',
                    dataSrc: "data",
                    cache: false,
                },

                columns: [
                    {
                        data: 'created_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: "start" },
                    { data: "end" },
                    { data: "duration" },
                    { data: "notes" },
                    { data: "status_html" },
                    { data: "approver_html" },
                ],

                lengthMenu: lengthMenu,

                order: [
                    [0, "desc"],
                ],
            });

        });
    </script>

{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
    <link rel="stylesheet" href="{% static 'inactivity/css/aa-bootstrap-fix.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'inactivity/css/inactivity.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'inactivity/css/my_requests.css' %}" type="text/css">
{% endblock %}

{% block extra_script %}
{% endblock %}