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

{% block head %}
    {{ block.super }}
    <script>
        let tag_selector_id = 1;

        function get_all_data_tags_for_rx(pms_id){
            $.ajax({
                url: "{% url 'site:pms-show-data-tags' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_req_id: pms_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html(data);
                }
            })
        }

        function get_parsed_data_for_rx(pms_id){
            $.ajax({
                url: "{% url 'site:pms-show-parsed-message' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_req_id: pms_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html(data);
                }
            })
        }

        function get_aux_data_for_rx(pms_id){
            $.ajax({
                url: "{% url 'site:pms-show-aux-info-data' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_req_id: pms_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html(data);
                }
            })
        }

        function get_data_translations_for_rx(pms_id){
            $.ajax({
                url: "{% url 'site:pms-show-test-data-translations' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_req_id: pms_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html(data);
                }
            })
        }

        function get_request_record_for_order(order_id){
            $.ajax({
                url: "{% url 'site:order-request-all-data' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_ord_req_id: order_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html(data);
                }
            })
        }

        function get_order_details_for_rx(pms_id){
            $.ajax({
                url: "{% url 'site:report-pms-request-detail' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    current_req_id: pms_id
                },
                success: function (data, status, jqXHR) {
                    $('#data-tags-viewer').html('');
                    $('#ord-req-table-content').html(data);
                    $('#ord-req-table').dialog("open");
                }
            })
        }

        function extract_tag_selectors(){
            let interface_name = $('#selected-interface').val();
            let work_order_type_filter = $('#work-order-types').val();
            let order_request_filter = $('#order-request-types').val();
            let selected_tag_data = [];
            let list_container = $('#list-container');
            let spinner_container = $('#spinner-container');
            let rx_list_tbody = $('#list-table tbody');

            $('[id^="tag-selector-"]').each(function () {
                let tag_id = $(this).attr('id').match(/\d+$/)[0];

                let data_tag = $('#selected-data-tag-' + tag_id).val() || 'UNKNOWN';
                let filter = $('#selected-filter-' + tag_id).val();
                let user_string = $('#user-string-' + tag_id).val();
                let case_sensitive = $('#case-sensitive-' + tag_id).is(':checked');

                let tag_selector_object = {
                    data_tag: data_tag,
                    filter: filter,
                    user_string: user_string,
                    ignore_case: case_sensitive
                }

                selected_tag_data.push(tag_selector_object)
            });

            list_container.css('display', 'none');
            rx_list_tbody.empty();
            $('#no-rx-found').remove();
            spinner_container.css('display', 'flex');

            $.ajax("{% url 'support:data-tools-get-rx-from-tags' %}", {
                type: 'POST',
                data: {
                    tag_data: JSON.stringify(selected_tag_data),
                    interface: interface_name,
                    work_order_type_filter: work_order_type_filter,
                    order_request_filter: order_request_filter,
                    csrfmiddlewaretoken: '{{csrf_token}}',
                },
                success: function (data) {
                    let rx_list = data['rx_list']
                    $('#number-of-rxs').text(rx_list.length + ' RXs found.')
                    if (rx_list.length > 0){
                        for (const rx of rx_list) {
                            let icons = '<td>' +
                                '<i id="order-details-' + rx['id'] + '" class="icon-file btn-link" title="Order Details"></i>' +
                                '<i id="data-tags-' + rx['id'] + '" class="icon-tag btn-link" title="View Data Tags"></i>' +
                                '<i id="parsed-data-' + rx['id'] + '" class="icon-briefcase btn-link" title="View Parsed Data" ></i><br>' +
                                '<i id="aux-data-' + rx['id'] + '" class="icon-asterisk btn-link" title="View Aux Info Data"></i>' +
                                '<i id="data-translation-' + rx['id'] + '" class="icon-headphones btn-link" title="View Data Translation Results"></i>' +
                                '<i id="order-request-record-' + rx['req__req_id'] + '" class="icon-adjust btn-link" title="Request Record"></i>' +
                                '</td>'
                            let href = '<td><a id="' + rx['id'] + '" href="/site/search/rx/' + rx['id']  + '/detail" target="_blank">' + rx['annotated_rx_number'] + '</a></td>'

                            let timestamp = new Date(rx['receive_dts']);
                            let formattedDateString = `<td>${(timestamp.getMonth() + 1).toString().padStart(2, '0')}/${timestamp.getDate().toString().padStart(2, '0')}/${timestamp.getFullYear()} ${timestamp.getHours().toString().padStart(2, '0')}:${timestamp.getMinutes().toString().padStart(2, '0')}:${timestamp.getSeconds().toString().padStart(2, '0')} ${timestamp.getHours() >= 12 ? 'PM</td>' : 'AM</td>'}`;

                            let task_type = 'Unknown'
                            if (rx['task_group_list'].indexOf('INPROCESS') > 0 && rx['task_group_list'].indexOf('PRINT') > 0) {
                                task_type = 'Fill and Print'
                            } else if (rx['task_group_list'].indexOf('INPROCESS') > 0) {
                                task_type = 'Fill'
                            } else if (rx['task_group_list'].indexOf('PRINT') > 0) {
                                task_type = 'Print Only'
                            } else if (rx['req__request_state__pms_state'] === 'NO_ACTION_TAKEN') {
                                if (rx['req__request_state__tag'] === 'REQ_NO_ACTION_RULE') {
                                    task_type = 'No Action Rule'
                                } else {
                                    task_type = 'No Action'
                                }
                            }

                            let work_order_type = '<td>' + task_type + '</td>'
                            let order_request_type = '<td>' + rx['req__request_type__description'] + '</td>'
                            let request_state = '<td>' + rx['request_state__display_name'] + '</td>'

                            let row = '<tr>' + href + formattedDateString + work_order_type + order_request_type + request_state + icons + '</tr>';
                            $('#list-table tbody').append(row);
                            $(document).on('click', '#data-tags-' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_all_data_tags_for_rx(rx['id']);
                            });
                            $(document).on('click', '#parsed-data-' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_parsed_data_for_rx(rx['id']);
                            });
                            $(document).on('click', '#aux-data-' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_aux_data_for_rx(rx['id']);
                            });
                            $(document).on('click', '#data-translation-' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_data_translations_for_rx(rx['id']);
                            });
                            $(document).on('click', '#order-details-' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_order_details_for_rx(rx['id']);
                            });
                            $(document).on('click', '#order-request-record-' + rx['req__req_id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                                get_request_record_for_order(rx['req__req_id']);
                            });
                            $(document).on('click', '#' + rx['id'], function () {
                                $('#list-table tbody tr').css('background-color', '');
                                $(this).parent().parent().css('background-color', 'lightblue');
                            });
                        }
                        $('#list-table').css('display', 'block');


                    } else {
                        $('#list-table').css('display', 'none');
                        list_container.append('<span id="no-rx-found">No RXs found.</span>');
                    }

                    list_container.css('display', 'flex');
                    spinner_container.css('display', 'none');
                }
            });
        }

        function add_tag_selector(){
            let originalDiv = $("#tag-selector");
            let clonedDiv = originalDiv.clone();
            clonedDiv.attr('id', 'tag-selector-' + tag_selector_id);
            clonedDiv.find('[id]').each(function () {
                let originalId = $(this).attr('id');
                let newId = originalId + '-' + tag_selector_id;
                $(this).attr('id', newId);

                let siblingLabel = $(this).siblings('label[for="' + originalId + '"]');
                if (siblingLabel.length) {
                    siblingLabel.attr('for', newId);
                }
            });
            clonedDiv.insertBefore("#add-tag-selector");

            if (tag_selector_id > 1){
                $(document).on('click', '#tag-deletor-' + tag_selector_id, function () {
                    let split_id = $(this).attr('id').split('-');
                    let id_number = split_id[split_id.length - 1];
                    let selector_id = '#tag-selector-' + id_number;
                    $(selector_id).remove();
                    $('#add-tag-selector').show();
                });
            }

            tag_selector_id += 1;

            if ($('[id^="tag-selector-"]').length > 5){
                $('#add-tag-selector').hide();
            }
        }


        $(function () {
            $('#selected-interface').on('change', function() {
                if (tag_selector_id === 1) {
                    add_tag_selector();
                    $('#add-tag-selector').css('display', 'flex');
                    $('#find-rx').css('visibility', 'visible');
                }
            });

            if ($('#selected-interface').children().length === 1) {
                if (tag_selector_id === 1) {
                    add_tag_selector();
                    $('#add-tag-selector').css('display', 'flex');
                    $('#find-rx').css('visibility', 'visible');
                }
            }

            $('#add-tag-selector').on('click', function() {
                add_tag_selector();
            });

            $('#find-rx').on('click', function(e) {
                e.preventDefault();
                extract_tag_selectors();
                $('#data-tags-viewer').html('');
            })

            $("#ord-req-table").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1400,
                open: function (event, ui) {

                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        })
    </script>

    <style>
        #data-tools-wrapper {
            display: flex;
            align-items: baseline;
            justify-content: space-evenly;
        }

        #data-tools-wrapper > div {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            width: 50%;
            max-width: 50%;
            min-width: 50%;
        }

        #interface-selector {
            display: flex;
            justify-content: center;
            align-items: baseline;
            user-select: none;
        }

        #interface-selector > label {
            font-size: 2vh;
            padding-right: 1vh;
        }

        #filter-selectors {
            display: flex;
            justify-content: center;
            align-items: baseline;
            user-select: none;
        }

        #filter-selectors > label {
            font-size: 1.5vh;
            padding-right: 1vh;
            padding-left: 1vh;
        }

        [id^="tag-selector-"] {
            display: flex;
            align-items: baseline;
        }

        [id^="selected-data-tag-"] {
            user-select: none;
        }

        [id^="selected-filter-"] {
            user-select: none;
        }

        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"]:checked + label {
            background-color: #44ba85;
        }

        input[type="checkbox"] + label {
            background-color: lightgrey;
            margin-left: 1vh;
            padding: .5vh 1vh;
            border: 1px solid grey;
            border-radius: 1vh;
            user-select: none;
        }

        input[type="checkbox"] + label:hover {
            border: 1px solid black;
        }

        #number-of-rxs {
            padding-left: 2vh;
        }

        #add-tag-selector {
            display: none;
            background-color: lightgrey;
            width: 66%;
            color: #0b5ed7;
            padding-top: 1.2vh;
            padding-bottom: 1.2vh;
            border-radius: 2vh;
            font-size: 5.5vh;
            justify-content: center;
            border: 1px solid transparent;
            user-select: none;
            margin-bottom: 2vh;
        }

        #add-tag-selector:hover {
            border: 1px solid grey;
            cursor: pointer;
        }

        #tag-selector {
            display: none;
        }

        #tag-deletor-1 {
            visibility: hidden;
        }

        .icon-tag {
            padding-right: 1vh;
            padding-left: 1vh;
        }

        .icon-headphones {
            padding-left: 1vh;
            padding-right: 1vh;
        }

        .icon-trash {
            font-size: 2.5vh;
            padding-left: 1vh;
        }

        .icon-trash:hover {
            color: #c02025;
            cursor: pointer;
        }

        #find-rx {
            visibility: hidden;
            margin-left: 2vh;
            font-size: 2vh;
            padding-top: .2vh;
            padding-bottom: .2vh;
            border-radius: 1vh;
            border: 1px solid grey;
        }

        #find-rx:hover {
            border: 1px solid black;
        }

        #list-container {
            display:none;
        }

        #data-tags-viewer {
            padding-right: 2vh;
            overflow-x: hidden;
            overflow-y: scroll;
            max-height: 80vh;
        }

        #list-table {
            padding-right: 2vh;
            overflow-x: hidden;
            overflow-y: scroll;
            max-height: 40vh;
        }

        #list-table > tbody > tr > td {
            border: 1px solid #ddd;
            padding-right: 1vh;
            padding-left: 1vh;
        }

        #list-table > thead {
            background-color: white;
            position: sticky;
            top: 0;
        }

        #spinner-container {
            display: none;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 7vh;
            height: 7vh;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
{% endblock %}

{% block sub-content %}
    <div id="data-tools-wrapper">
        <div>
            <div id="interface-selector">
                <label for="selected-interface">Interface: </label>
                <select id="selected-interface">
                    {% if interface_list|length > 1 %}
                        <option disabled selected value>Select an Interface</option>
                    {% endif %}
                    {% for interface in interface_list %}
                        <option value="{{interface}}">{{interface}}</option>
                    {% endfor %}
                </select>
                <button id="find-rx">Search for RX</button>
                <span id="number-of-rxs"></span>
            </div>

            <div id="filter-selectors">
                <label for="work-order-types">Work Order Type: </label>
                <select id="work-order-types">
                    <option selected value="All">All</option>
                    {% for work_order_type in work_order_type_list %}
                        <option value="{{work_order_type}}">{{work_order_type}}</option>
                    {% endfor %}
                </select>

                <label for="order-request-types">Order Request Type: </label>
                <select id="order-request-types">
                    <option selected value="All">All</option>
                    {% for request_type in request_type_list %}
                        <option value="{{request_type}}">{{request_type}}</option>
                    {% endfor %}
                </select>
            </div>

            <div id="add-tag-selector">
                <span>+</span>
            </div>

            <div id="rx-list">
                <div id="spinner-container">
                    <div class="spinner"></div>
                </div>
                <div id="list-container">
                    <table id="list-table">
                        <thead>
                            <tr>
                                <th>RX Number</th>
                                <th>Time Received</th>
                                <th>Work Order Type</th>
                                <th>Order Request Type</th>
                                <th>Request State</th>
                                <th>
                                    <i class="icon-list"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div>
            <div id="data-tags-viewer">

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

    <div id="ord-req-table" title="Order Request Full Data" style="margin-left: 2px;">
        <div id="ord-req-table-content">
            Loading Order Request Table Data...
        </div>
    </div>

    <div id="tag-selector">
        <label for="selected-data-tag"></label>
        <select id="selected-data-tag">
            <option disabled selected value>UNKNOWN</option>
            {% for data_tag in data_tag_list %}
                <option value="{{data_tag}}">{{data_tag}}</option>
            {% endfor %}
        </select>
        <label for="selected-filter"></label>
        <select id="selected-filter">
            {% for filter in filter_list %}
                <option value="{{filter}}">{{filter}}</option>
            {% endfor %}
        </select>
        <label for="user-string"></label>
        <input type="text" id="user-string" autocomplete="off">
        <input type="checkbox" id="case-sensitive">
        <label for="case-sensitive">Ignore Case?</label>
        <i id="tag-deletor" class="icon-trash"></i>
    </div>
{% endblock %}