{% extends "_base.html" %}

{% block content %}

<div class="row">
    <div class="col-sm-12">
        <h2 class="heading font-normal mb-2">Statistiken</h2>
    </div>
    <div class="flex flex-row flex-wrap flex-grow mt-2">
        <div class="md:w-3/4 p-3">
            <div class="bg-grey-lightest border border-grey rounded shadow">
                <div class="border-b border-grey-dark p-3">
                    <h2 class="text-grey-darkest">Seitenaufrufe</h2>
                </div>
                <div class="p-5 bg-white">
                    <canvas id="visitor-chart" class="chartjs"></canvas>
                    <script>
                        var chart = document.getElementById("visitor-chart");
                        Chart.plugins.register({
                            beforeDraw: function(chartInstance) {
                            var ctx = chartInstance.chart.ctx;
                            ctx.fillStyle = "white";
                            ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
                            }
                        });
                        var graph = new Chart(chart, {
                            "type": "bar",
                            "data": {
                                "labels": {{ dates|safe }},
                                "datasets": [
                                {% for lang in hits %} 
                                {
                                    "label": "{{ lang.0|safe }}",
                                    "lineTension": 0,
                                    "data": {{ lang.2 }},
                                    "type": "line",
                                    "fill": false,
                                    "borderColor": "{{ lang.1}}"
                                },
                                {% endfor %}
                                ]},
                            "options": {
                                "scales": {
                                    "yAxes": [{
                                        "ticks": {
                                            "beginAtZero": true
                                        }
                                    }]
                                } 
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="md:w-1/4 p-3 pb-0">
            <div class="bg-grey-lightest border border-grey rounded shadow">
                <div class="border-b border-grey-dark p-3">
                    <h2 class="text-grey-darkest">Einstellungen</h2>
                </div>
                <form class="px-8 pt-6 pb-8">
                    <h3 class="text-grey-darkest m-2">Startzeitpunkt auswählen:</h3>
                    <input class="shadow m-2 appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" type="date" name="start_date" />
                    <h3 class="text-grey-darkest m-2">Endzeitpunkt auswählen:</h3>
                    <input class="shadow m-2 appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" type="date" name="end_date" />
                    <fieldset>
                        <div class="w-full m-2">
                            <input type="radio" id="viewmonth" name="peri" value="day" checked>
                            <label for="viewmonth">Monatsansicht</label>
                        </div>
                        <div class="w-full m-2">
                            <input type="radio" id="viewyear" name="peri" value="month">
                            <label for="viewyear">Jahresansicht</label>
                        </div>
                    </fieldset>                    
                    <input type="submit" name="submit_save" class="cursor-pointer bg-blue hover:bg-grey-dark text-white font-bold py-3 px-4 rounded m-2" value="Ansicht anpassen" />
                </form>
            </div>
            <div class="bg-grey-lightest border border-grey mt-3 rounded shadow">
                <div class="border-b border-grey-dark p-3">
                    <h2 class="text-grey-darkest">Exportieren</h2>
                </div>
                <div class="px-8 pt-6 pb-8">
                    <label>Format auswählen</label>
                    <select id="exports" class="mt-4 block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow focus:outline-none focus:shadow-outline">  
                        <option value="empty" selected>--bitte auswählen--</option>
                        <option value="image">Bild/PNG</option>
                        <option value="csv">Tabellendokument/CSV</option>
                    </select>
                    <button class="mt-4 bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" id="ex" onclick="export_Chart()">Export</button>
                </div>            
            </div>
        </div>
        <script>
            function create_download(filename, content){
                var element = document.createElement('a');
                element.setAttribute('href', content);
                element.setAttribute('download', filename);
                element.style.display = 'none';
                document.body.appendChild(element);
                element.click();
                document.body.removeChild(element);
            }

            function export_Chart(){
                var selection = document.getElementById("exports");
                var format = selection.options[selection.selectedIndex].value;
                switch(format){
                    case "image":
                        var chart = document.getElementById("visitor-chart");
                        url = chart.toDataURL("image/png",1.0);
                        create_download("test.png",url);
                        break;
                    case "csv":
                        var rows = "{{csv|safe}}";
                        let csvContent = "data:text/csv;charset=utf-8," + rows;
                        create_download("text.csv", csvContent);
                        break;
                    default:
                        alert("Bitte wählen Sie ein Format aus.");
                }
            }
        </script>
{% endblock %}