{% extends "iobase.html" %}
{% from 'bootstrap5/form.html' import render_form %}
{% block content %}
    <div class="alert alert-{{ alert_type }} col-md-4" role="alert">
        <h4 class="alert-heading">{{ title }}</h4>
        <button class="btn btn-primary"
                onclick="window.location.href='{{ url_for("admin.users") }}'">Back</button>
        <div class="row">
            <div>{{ render_form(form) }}</div>
        </div>
    </div>
{% endblock %}
{% block jscript %}
    {{ super() }}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $("#excel").change(function () {
                if (!$("#excel").is(":checked") && !$("#html").is(":checked")) {
                    $("#submit").attr("disabled", true);
                } else {
                    $("#submit").removeAttr("disabled");
                }
            });
            $("#html").change(function () {
                if (!$("#excel").is(":checked") && !$("#html").is(":checked")) {
                    $("#submit").attr("disabled", true);
                } else {
                    $("#submit").removeAttr("disabled");
                }
            });
        });
        var socket = io();
        var update_bar = false;
        socket.on('connect', function() {
            socket.emit('client', {data: 'Connected.'});
        });
        socket.on('server', function(msg) {
            var text = document.getElementById('status');
            text.value = msg.message;
            if (update_bar) {
                $(".progress-bar").attr("style", "width: "+msg.percentage+"%");
                $('.progress-bar').attr('aria-valuenow', msg.percentage).css('width',  msg.percentage+'%');
                $('#bar-value').html(msg.percentage+"%");
            }
            if (msg.message == "Start") {
                update_bar = true;
            }
            if (msg.message == "Done!") {
                if ($("#excel").is(":checked")) {
                    $("#excel_button").attr("onclick", "window.open('" + msg.payload.excel +"', '_blank')");
                    $("#excel_button").removeAttr("hidden");
                }
                if ($("#html").is(":checked")) {
                    $("#html_button").attr("onclick", "window.open('"+msg.payload.html +"', '_blank')");
                    $("#html_button").removeAttr("hidden");
                }
                $("#button_container").removeAttr("hidden");
                update_bar = false;
            }
            if (msg.status=="Error") {
                $('#status-alert').removeClass("alert-success").addClass("alert-danger").removeAttr("hidden");
                $('#status').addClass("bg-danger text-white").removeClass("bg-success");
                $("#status").text=msg.message;
            }
            $("#go_back").removeAttr("hidden");
            
        });
        function send() {
            var data= {
                action: "ReadyToRock!", 
                score: document.getElementById('score').value, 
                excel: document.getElementById('excel').checked, 
                html: document.getElementById('html').checked
            };
            $("#score").attr("disabled", true);
            $("#excel").attr("disabled", true);
            $("#html").attr("disabled", true);
            socket.emit('client', data);
            $("#status").removeAttr("hidden");
            $("#status-alert").removeAttr("hidden");
            $(".progress").removeAttr("hidden");
            $("#submit").attr("hidden", true);
        }
    </script>
{% endblock %}
