<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        html {
            font-size: 0.5rem;
        }

        @media (min-width: 576px) {
            html {
                font-size: 0.625rem;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: 0.75rem;
            }
        }

        @media (min-width: 992px) {
            html {
                font-size: 0.875rem;
            }
        }

        @media (min-width: 1200px) {
            html {
                font-size: 1rem;
            }
        }

        .border-10 {
            border-style: solid;
            border-width: 10px;
        }

        .right-button {
            display: flex;
            justify-content: right;
            align-items: center;
        }
    </style>
    <title>RADIFOX QA - {{ subject_id }}&nbsp;/&nbsp;{{ session_id }}</title>
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top navbar-dark bg-dark">
    <a class="navbar-brand" href="{{ url_for('index') }}">RADIFOX QA</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item {% if not session['qa_mode'] or session['qa_mode'] == 'conversion' %}active{% endif %}">
        <a class="nav-link" href="{{ url_for('set_mode', mode='conversion') }}">Conversion</a>
      </li>
      <li class="nav-item {% if session['qa_mode'] == 'processing' %}active{% endif %}">
        <a class="nav-link" href="{{ url_for('set_mode', mode='processing') }}">Processing</a>
      </li>
    </ul>
    <span class="navbar-text">
        <a href="{{ url_for('project', project_id=project_id) }}">{{ project_id | upper() }}</a>&nbsp;/&nbsp;
        <a href="{{ url_for('subject', project_id=project_id, subject_id=subject_id) }}">{{ subject_id }}</a>&nbsp;/&nbsp;{{ session_id }}
    </span>
  </div>
</nav>
<br />
<br />
<div class="container-fluid">
    {% for key, value in processing_results|items %}
        {% set steploop = loop %}
        <h2 class="text-center">{{ key | upper() | replace(':', ' v') }}</h2>
        <hr /><hr />
        <br />
        {% for id, prov in value|items %}
            {% set provloop = loop %}
            {% for output_name, qa_dict in prov.OutputQA|items %}
                {% set outloop = loop %}
                <div class="container-fluid">
                    <div class="row"><div class="col">
                        <h4>{{ output_name|replace('_',' ')|title() }}:</h4>
                    </div></div>
                    <div class="row"><div class="col">
                        {% for filestr, qa_img in qa_dict|items %}
                            {% set imgloop = loop %}
                            <div class="container-fluid outer-container" id="image{{ steploop.index }}-{{ provloop.index }}-{{ outloop.index }}-{{ imgloop.index }}">
                                <div class="row">
                                    <div class="col-10"><h5>{{ qa_img[3] }}</h5></div>
                                    <div class="col-2 right-button">
                                        <button type="button"
                                                onclick="sendPostRequest(this)"
                                                data-api="qa-pass"
                                                data-project="{{ project_id }}"
                                                data-subject="{{ subject_id }}"
                                                data-session="{{ session_id }}"
                                                data-source_path="{{ filestr }}"
                                                data-loop_index="{{ steploop.index }}-{{ provloop.index }}-{{ outloop.index }}-{{ imgloop.index }}"
                                                id="qa-pass{{ steploop.index }}-{{ provloop.index }}-{{ outloop.index }}-{{ imgloop.index }}"
                                                class="btn {% if qa_img[4] == "pass" %}btn-success{% else %}btn-dark{% endif %}">
                                            PASS
                                        </button>
                                        &nbsp;
                                        <button type="button"
                                                onclick="sendPostRequest(this)"
                                                data-api="qa-fail"
                                                data-project="{{ project_id }}"
                                                data-subject="{{ subject_id }}"
                                                data-session="{{ session_id }}"
                                                data-source_path="{{ filestr }}"
                                                data-loop_index="{{ steploop.index }}-{{ provloop.index }}-{{ outloop.index }}-{{ imgloop.index }}"
                                                id="qa-fail{{ steploop.index }}-{{ provloop.index }}-{{ outloop.index }}-{{ imgloop.index }}"
                                                class="btn {% if qa_img[4] == "fail" %}btn-danger{% else %}btn-dark{% endif %}">
                                            FAIL
                                        </button>
                                    </div>
                                </div>
                            {% if qa_img %}
                                <div class="row border-10 border-secondary mx-auto" style="background:#000000; width: 100%">
                                    <div class="col text-center">
                                        <img src="{{ url_for('image', project_id=project_id, subject_id=subject_id, session_id=qa_img[0], qa_dir=qa_img[1], image_name=qa_img[2]) }}"
                                             class="pop img-fluid" alt="{{ qa_img[2] }}" loading="lazy"/>
                                    </div>
                                </div>
                            {% endif %}
                            </div>
                            <br />
                        {% endfor %}
                    </div></div>
                </div>
            {% endfor %}
            <div class="container-fluid">
                <div class="row"><div class="col text-center">
                    <button type="button"
                            data-toggle="modal"
                            data-target="#prov{{ steploop.index }}{{ provloop.index }}"
                            class="btn btn-dark">
                        PROVENANCE
                    </button>
                </div></div>
            </div>
            <hr />
            <br />
        {% endfor %}
        <br /><br />
    {% endfor %}
</div>
<button id="scrollToNextContainer" class="btn btn-primary position-fixed mb-4" style="bottom: 20px; right: 5px;">Next Image</button>
<button id="scrollToPrevContainer" class="btn btn-primary position-fixed mb-4" style="bottom: 20px; right: 125px;">Prev Image</button>

<nav class="navbar fixed-bottom navbar-dark bg-dark" style="padding-top: 0; padding-bottom: 0">
    <span class="navbar-text">
        {% if prev_session %}
            &larr;&nbsp;&nbsp;<a href="{{ url_for('qa_page', project_id=project_id, subject_id=subject_id, session_id=prev_session) }}">{{ prev_session }}</a>
        {% elif prev_subject %}
            &larr;&nbsp;&nbsp;<a href="{{ url_for('subject', project_id=project_id, subject_id=prev_subject) }}">{{ prev_subject }}</a>
        {% endif %}
    </span>
    <span class="navbar-text">
        {% if next_session %}
            <a href="{{ url_for('qa_page', project_id=project_id, subject_id=subject_id, session_id=next_session) }}">{{ next_session }}</a>&nbsp;&nbsp;&rarr;
        {% elif next_subject %}
            <a href="{{ url_for('subject', project_id=project_id, subject_id=next_subject) }}">{{ next_subject }}</a>&nbsp;&nbsp;&rarr;
        {% endif %}
    </span>
</nav>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width: 100%" data-dismiss="modal">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" class="imagepreview" alt="full size image">
            </div>
        </div>
    </div>
</div>

{% for key, value in processing_results|items %}
    {% set steploop = loop %}
        {% for id, prov in value|items %}
            {% set provloop = loop %}
            <div class="modal fade" id="prov{{ steploop.index }}{{ provloop.index }}" tabindex="-1" role="dialog" aria-labelledby="prov{{ steploop.index }}-{{ provloop.index }}" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width: 90%" data-dismiss="modal">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="container-fluid" id="prov{{ steploop.index }}-{{ provloop.index }}">
                                <br/>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-center"><span class="font-weight-bold" style="font-size: 120%">ID: </span>{{ prov.Id }}</h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-left">
                                            <span class="font-weight-bold" style="font-size: 120%">Container:</span>
                                            <br/>
                                            {{ prov.Container.url }}
                                            <br />
                                            {{ prov.Container.hash }}
                                            <br />
                                            Built: {{ prov.Container.timestamp.strftime('%Y-%m-%d %H:%M:%S') }} by {{ prov.Container.builder }}
                                        </h6>
                                    </div>
                                    <div class="col">
                                        <h6 class="text-right">
                                            <span class="font-weight-bold" style="font-size: 120%">Run Info:</span>
                                            <br/>
                                            Started: {{ prov.StartTime }}
                                            <br />
                                            Duration: {{ prov.Duration }}
                                            <br />
                                            User: {{ prov.User }}
                                        </h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-left">
                                            <span class="font-weight-bold" style="font-size: 120%">Inputs:</span>
                                            <br/>
                                            {% for key, value in prov.Inputs|items %}
                                                {% if value is iterable and value is not string %}
                                                    {{ key }}: <br />
                                                    {% for sub in value %}
                                                        {% set val = sub.split(':') %}
                                                        &emsp; - {{ val[0] }}<br />
                                                        <span class="text-muted">&emsp;&emsp;[{{ val[1] }}:{{ val[2] }}]</span><br />
                                                    {% endfor %}
                                                {% else %}
                                                    {% set val = value.split(':') %}
                                                    {{ key }}: <br />
                                                    &emsp; - {{ val[0] }}<br />
                                                    <span class="text-muted">&emsp;&emsp;[{{ val[1] }}:{{ val[2] }}]</span><br />
                                                {% endif %}
                                            {% endfor %}
                                        </h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-left">
                                            <span class="font-weight-bold" style="font-size: 120%">Outputs:</span>
                                            <br/>
                                            {% for key, value in prov.Outputs|items %}
                                                {% if value is iterable and value is not string %}
                                                    {{ key }}: <br />
                                                    {% for sub in value %}
                                                        {% set val = sub.split(':') %}
                                                        &emsp; - {{ val[0] }}<br />
                                                        <span class="text-muted">&emsp;&emsp;[{{ val[1] }}:{{ val[2] }}]</span><br />
                                                    {% endfor %}
                                                {% else %}
                                                    {% set val = value.split(':') %}
                                                    {{ key }}: <br />
                                                    &emsp; - {{ val[0] }}<br />
                                                    <span class="text-muted">&emsp;&emsp;[{{ val[1] }}:{{ val[2] }}]</span><br />
                                                {% endif %}
                                            {% endfor %}
                                        </h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-left">
                                            <span class="font-weight-bold" style="font-size: 120%">Parameters:</span>
                                            {% if prov.Parameters is mapping %}
                                                <br/>
                                                {% for key, value in prov.Parameters|items %}
                                                    {% if value is iterable and value is not string %}
                                                        {{ key }}: <br />
                                                        {% for sub in value %}
                                                            &emsp; - {{ sub }}<br />
                                                        {% endfor %}
                                                    {% else %}
                                                        {{ key }}: {{ value }}<br />
                                                    {% endif %}
                                                {% endfor %}
                                            {% else %}
                                                None
                                            {% endif %}
                                        </h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h6 class="text-left">
                                            <span class="font-weight-bold" style="font-size: 120%">Command:</span>
                                            <br/>
                                            {{ prov.Command }}
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
{% endfor %}

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        $('.pop').on('click', function () {
            $('.imagepreview').attr('src', $(this).attr('src'));
            $('#imagemodal').modal('show');
        });
    });

    function updateButtonStatus() {
        // Get all div elements with class "container"
        const containers = $('div.outer-container');

        // Find the current container based on scroll position
        const currentContainer = containers.filter(function () {
            return $(window).scrollTop() >= $(this).offset().top - 101;
        }).last();

        // Find the index of the current container
        const currentIndex = containers.index(currentContainer);

        // Check if we are at the first or last container
        if (currentIndex <= 0) {
            $('#scrollToPrevContainer').prop('disabled', true);
        } else {
            $('#scrollToPrevContainer').prop('disabled', false);
        }
        if (currentIndex >= containers.length - 1) {
            $('#scrollToNextContainer').prop('disabled', true);
        } else {
            $('#scrollToNextContainer').prop('disabled', false);
        }
    }

    $('#scrollToPrevContainer').on('click', function () {
        // Get all div elements with class "container"
        const containers = $('div.outer-container');

        // Find the current container based on scroll position
        const currentContainer = containers.filter(function () {
            return $(window).scrollTop() >= $(this).offset().top - 101;
        }).last();

        // Find the index of the current container
        const currentIndex = containers.index(currentContainer);

        // Find the next container
        const prevContainer = containers.eq(currentIndex - 1);

        // If the next container exists, scroll to it
        if (prevContainer.length && currentIndex > 0) {
            $('html, body').animate({
                scrollTop: prevContainer.offset().top - 100
            }, 200); // 200ms animation duration
        }
    });
    $('#scrollToNextContainer').on('click', function () {
        // Get all div elements with class "container"
        const containers = $('div.outer-container');

        // Find the current container based on scroll position
        const currentContainer = containers.filter(function () {
            return $(window).scrollTop() >= $(this).offset().top - 101;
        }).last();

        // Find the index of the current container
        const currentIndex = containers.index(currentContainer);

        // Find the next container
        const nextContainer = containers.eq(currentIndex + 1);

        // If the next container exists, scroll to it
        if (nextContainer.length) {
            $('html, body').animate({
                scrollTop: nextContainer.offset().top - 100
            }, 200); // 200ms animation duration
        }
    });
    // Update the button status on page load and when scrolling
    $(window).on('load scroll', updateButtonStatus);

    function sendPostRequest(btn) {
        // Retrieve data from the custom data-* attributes of the button
        const api = btn.getAttribute('data-api');
        const loop_idx = btn.getAttribute('data-loop_index');
        const data = {
            project: btn.getAttribute('data-project'),
            subject: btn.getAttribute('data-subject'),
            session: btn.getAttribute('data-session'),
            source: btn.getAttribute('data-source_path'),
        };
        // Define the URL to which the POST request will be sent
        const url = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + `/qa/${api}-btn`;

        // Use the jQuery $.ajax() function to send the POST request
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (json) {
                // Handle a successful response
                const fail_btn = document.getElementById(`qa-fail${loop_idx}`);
                fail_btn.classList.remove("btn-danger");
                fail_btn.classList.add("btn-dark");

                const pass_btn = document.getElementById(`qa-pass${loop_idx}`);
                pass_btn.classList.remove("btn-success");
                pass_btn.classList.add("btn-dark");

                const button = document.getElementById(`${api}${loop_idx}`);
                button.classList.remove("btn-dark");
                if (api === 'qa-pass') {
                    button.classList.add("btn-success");
                } else {
                    button.classList.add("btn-danger");
                }
            },
            error: function (xhr, status, error) {
                // Handle any errors
                console.error("Error:", error);
            }
        });
    }
</script>
</body>
</html>
