{% extends "data-tools-container.html" %}

{% block head %}
    {{ block.super }}
    <script>
        function update_table(data_tag, interface_name, include_test_data) {
            console.log('updating table')
            $.ajax("{% url 'support:data-tools-get-attr-value-list' %}", {
                type: 'POST',
                data: {
                    data_tag: data_tag,
                    interface: interface_name,
                    include_test_data: include_test_data,
                    csrfmiddlewaretoken: '{{csrf_token}}',
                },
                success: function (data) {
                    let attr_value_list = data['attr_value_list'];
                    attr_value_list.sort(function(a, b) {
                        return b.count - a.count;
                    });

                    $('#data-tag-table tbody tr').remove();

                    $.each(attr_value_list, function(i, attr_value){
                        let row = '<tr><td class="attr_value">' + attr_value['attr_value'] + '</td><td>' + attr_value['count'] + '</td></tr>';
                        $('#data-tag-table tbody').append(row);
                    })

                    $('#unique-data-tags').text($('#data-tag-table > tbody').children().length);
                    $('#total-rxs').text($('td.attr_value').siblings().toArray().reduce((sum, elem) => sum + parseFloat($(elem).text()), 0));
                }
            });
        }

        function download_csv() {
            $.ajax("{% url 'support:data-tools-get-attr-value-list' %}", {
                type: 'POST',
                data: {
                    data_tag: $('#selected-data-tag').val(),
                    interface: $('#selected-interface').val(),
                    csv: 'true',
                    csrfmiddlewaretoken: '{{csrf_token}}',
                },
                success: function (data, status, xhr) {
                    const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                    let blob = new Blob([data], { type: 'text/csv' });
                    let link = document.createElement('a');
                    let filename = 'data-tag.csv';

                    if (contentDisposition) {
                        const match = contentDisposition.match(/filename="(.+?)"/);
                        if (match) {
                            filename = match[1];
                        }
                    }

                    link.href = window.URL.createObjectURL(blob);
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(link.href);
                }
            });
        }

        $(function () {
            $('#selected-data-tag').on('change', function() {
                let data_tag = $('#selected-data-tag').val();
                let interface_name = $('#selected-interface').val();
                let include_test_data = $('#include-test-requests').is(':checked');
                update_table(data_tag, interface_name, include_test_data);
                $('#download_button').css('display', 'inline')
            });


            $('#selected-interface, #include-test-requests').on('change', function() {
                let interface_name = $('#selected-interface').val();
                let data_tag = $('#selected-data-tag').val();
                let include_test_data = $('#include-test-requests').is(':checked');
                if (data_tag) {
                    update_table(data_tag, interface_name, include_test_data);
                }
            });
        });
    </script>

    <style>
        #selected-interface {
            margin: 0 1vh;
        }

        #selected-data-tag {
            margin: 0 1vh;
        }

        #data-tools-wrapper {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        #data-tools-wrapper > div {
            display: flex;
            justify-content: center;
        }

        #data-tools-wrapper > div:nth-child(1) {
            align-items: baseline;
        }


        #data-tools-wrapper > div:nth-child(1) {
            align-items: baseline;
            margin-top: 1vh;
        }

        #data-tools-wrapper > div:nth-child(3) {
            align-items: baseline;
            margin-top: 1vh;
        }

        #data-tools-wrapper > div:nth-child(4) {
            padding-top: 1vh;
            width: 50%;
        }

        #data-tag-table {
            width: 100%;
            text-align: center;
        }

        #data-tag-table > thead {
            border-bottom: 4px solid black;
        }

        #data-tag-table > thead > tr > th:nth-child(1) {
            width: 80%;
            border-right: 1px solid black;
        }

        #data-tag-table > tbody > tr:nth-child(even) {
            background-color: lightgrey;
        }

        #data-tag-table > tbody > tr > td:nth-child(1) {
            width: 80%;
            border-right: 1px solid black;
        }

        #download_button {
            display: none;
            margin-left: 2vh;
        }
    </style>
{% endblock %}

{% block sub-content %}
    <div id="data-tools-wrapper">
        <div>
            <label for="selected-data-tag">Select Data Tag to get value of:</label>
            <select id="selected-data-tag">
                <option disabled selected value>Select a Data Tag</option>
                {% for data_tag in data_tag_list %}
                    <option value="{{data_tag}}">{{data_tag}}</option>
                {% endfor %}
            </select>

            <label for="selected-interface">for Interface</label>
            <select id="selected-interface">
                <option selected value>All</option>
                {% for interface in interface_list %}
                    <option value="{{interface}}">{{interface}}</option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label>
                <input type="checkbox" id="include-test-requests">
                Include test requests
            </label>
        </div>

        <div>
            <span id="unique-data-tags">0</span>&nbsp;distinct items found across&nbsp;<span id="total-rxs">0</span>&nbsp;total RXs
            <button id="download_button" onclick="download_csv()">Export as CSV</button>
        </div>

        <div>
            <table id="data-tag-table">
                <thead>
                    <tr>
                        <th data-column="attr_value">Data Tag Value</th>
                        <th data-column="count">Frequency</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}