<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portal za oddajanje besedil</title>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" >
    <link rel="icon" href="static/favicon.svg" sizes="any" type="image/svg+xml">
    <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/header.css" type="text/css">
    <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/form.css" type="text/css">
    <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/simple-grid.css" type="text/css">
    <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/contracts.css" type="text/css">
</head>
<body>
    <header>
        <div class="logo"><a href="{{ROUTE_PREFIX}}/"><img src="{{ROUTE_PREFIX}}/static/image/logo-white.svg"/></a></div>
        <div class="menu-items">
            {% if is_institution_coordinator %}
            <a href="{{ROUTE_PREFIX}}/manage-institution">Upravljaj z ekipo</a>
            {% endif %}
            {% if is_admin %}
            <a href="{{ROUTE_PREFIX}}/admin">Administracijski meni</a>
            {% endif %}
            <a href="https://slovenscina.eu/" target="_blank">Več informacij o sodelovanju</a>
            <a href="{{ROUTE_PREFIX}}/logout">Odjava</a>
        </div>
    </header>
    <div class="container" style="margin-top:8rem;">
        <div class="row">
            <div class="col-12">
                <h1 class="title">Korpus Šolar</h1>
                <p class="subtitle"></p>

                <div class="tab-nav">
                    <a href="{{ROUTE_PREFIX}}/oddaja">Oddaja besedil</a>
                    <a href="{{ROUTE_PREFIX}}/zgodovina">Zgodovina sodelovanja</a>
                    <a href="{{ROUTE_PREFIX}}/pogodbe" class="active">Ekipa</a>
                </div>
            </div>
        </div>





        <!--<div class="row">
            <div class="col-12">
                <h2>Sodelujoči</h2>
            </div>
        </div>-->
        <div class="row">
            <div class="col-6">
                <h2>Sodelujoči</h2>
                {% for u in institution_users %}
                    <div class="team-item">
                        <div class="team-item-name">{{u.name}} <span class="team-item-role">{{role_map[u.id]}}</span></div>
                    </div>
                {% endfor %}


                <h2 style="margin-top:2rem">Zgodovina sprememb</h2>
                {% for item in cooperation_history %}
                <div class="team-item">
                    <div class="team-item-name">
                        {{item.name}}
                        <span class="team-item-role" style="margin-left:0">{{item.timestamp.strftime('%d.%m.%Y')}} postane {% if item.role == "coordinator"%}koordinator/-ka{% elif item.role == "mentor" %}mentor/-ica{% elif item.role == "other" %}druga vloga{% endif %}</span>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="col-6">
                <div id="my_dataviz_title">
                    <h2>Število oddaj na uporabnika</h2>
                    <div id="my_dataviz"></div>
                </div>
                <div id="my_dataviz__region_title">
                    <h2>Število vseh oddaj po regijah</h2>
                    <div id="my_dataviz_region">

                    </div>
                    <div>
                        <div style="display:inline-block;width:12px;height:12px;background:#006CB7"></div>
                        <p style="display:inline-block">Osnovne šole</p>
    
                        <div style="margin-left:32px;display:inline-block;width:12px;height:12px;background:#B86D00"></div>
                        <p style="display:inline-block">Srednje šole</p>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


</body>
<script src="https://d3js.org/d3.v6.js"></script>
<style>
    #my_dataviz .tick line{
        visibility:hidden;
    }
    #my_dataviz path.domain{
        visibility:hidden;
    }
    #my_dataviz_region .tick line{
        visibility:hidden;
    }
    #my_dataviz_region path.domain{
        visibility:hidden;
    }
</style>
<script>
    var data;
    // Parse the Data
    d3.json("/topuploads-institution/{{institution_id}}").then(function(jsondata) {
        if(Object.keys(jsondata).length < 1) {
            document.getElementById("my_dataviz_title").remove();
            return;
        }
        data = [];
        console.log(Object.keys(jsondata).length);
        var margin = {top: 20, right: 0, bottom: 40, left: 0};
        var width = document.getElementById("my_dataviz").clientWidth - margin.left - margin.right;
        var height = Object.keys(jsondata).length * 56;
        var svg = d3.select("#my_dataviz")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("overflow","visible")
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");
        for(var key in jsondata) {
            data.push({'name': key, 'value':jsondata[key]});
        }


        console.log(data);

        // Add X axis
        var x = d3.scaleLinear()
            .domain([0,d3.max(data, function (d) { return d.value})])
            .range([ 0, width]);
        
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x)/*.ticks(5)*/)
            .selectAll("text")
            .style("text-anchor", "center");

        // Y axis
        var y = d3.scaleBand()
            .range([ 0, data.length*56 ])
            .domain(data.map(function(d) { return d.name; }))
            .padding(0);
        svg.append("g")
            .call(d3.axisLeft(y))
            .selectAll("text")
            .style("text-anchor", "start")
            .style("font-size", "14px")
            .attr("transform", "translate(8,-36)");

        //Bars
        svg.selectAll("myRect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", x(0) )
            .attr("y", function(d) { return y(d.name); })
            .attr("width", function(d) { return x(d.value); })
            .attr("height", 32 )
            .attr("fill", "#006CB7");
    })

</script>
<script>
    var data;
    // Parse the Data
    d3.json("/uploadstats-per-region").then(function(jsondata) {
        
        data = [];
        console.log(Object.keys(jsondata).length);
        var margin = {top: 20, right: 0, bottom: 40, left: 0};
        var width = document.getElementById("my_dataviz_region").clientWidth - margin.left - margin.right;
        var height = Object.keys(jsondata).length * 56;
        var svg = d3.select("#my_dataviz_region")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("overflow","visible")
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");
        for(var key in jsondata) {
            data.push({'name': key, 'value':jsondata[key]});
        }


        console.log(data);

        // Add X axis
        var x = d3.scaleLinear()
            .domain([0,d3.max(data, function (d) { return Math.max(...d.value)})])
            .range([ 0, width]);

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .selectAll("text")
            .style("text-anchor", "center");

        // Y axis
        var y = d3.scaleBand()
            .range([ 0, data.length*56 ])
            .domain(data.map(function(d) { return d.name; }))
            .padding(0);
        svg.append("g")
            .call(d3.axisLeft(y))
            .selectAll("text")
            .style("text-anchor", "start")
            .style("font-size", "14px")
            .attr("transform", "translate(8,-36)");

        //Bars
        svg.selectAll("myRect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", x(0) )
            .attr("y", function(d) { return y(d.name); })
            .attr("width", function(d) { return x(d.value[0]); })
            .attr("height", 16 )
            .attr("fill", "#006CB7");
            svg.selectAll("myRect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", x(0) )
            .attr("y", function(d) { return y(d.name); })
            .attr("width", function(d) { return x(d.value[1]); })
            .attr("height", 16 )
            .attr("transform", "translate(0,16)")
            .attr("fill", "#B86D00");
    })

</script>
</html>