@(user: UserData, permission: List[String], form: Form[CreateRoom])


@main("Create meeting", user.name) {
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <form id="createRoom" class="form-horizontal" action="/createRoom" method="POST" role="form" onsubmit="readChart()">

                <!-- Form Name -->
                <legend>Create room</legend>
                @if(form.hasGlobalErrors) {

                @for(error <- form.globalErrors) {
                <div class="alert alert-danger" role="alert">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <span class="sr-only">Error:</span>
                    @error.message
                </div>

                }

                }
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label col-sm-2" for="name">Room name:</label>

                    <div class="col-sm-7">
                        <input id="name" name="name" type="text" placeholder="name" class="form-control" required="">

                        <p class="help-block">Name of your room</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="name">Short description:</label>

                    <div class="col-sm-7">
                        <textarea id="message" name="message" type="text" placeholder="Description"
                                  class="form-control"></textarea>
                    </div>
                </div>
                <!-- Button Drop Down -->
                <div class="form-group">
                    <label class="control-label col-sm-2 " for="perm">Permission:</label>

                    <div class="col-sm-7">
                        <select id="perm" name="perm" class="form-control" form="createRoom" required="">
                            @for(perm <- permission) {
                            <option value=@perm>@perm</option>
                            }
                        </select>
                    </div>
                </div>

                <!-- Button Drop Down -->
                <div class="form-group">
                    <label class="control-label col-sm-2 " for="labelType">Type:</label>

                    <div class="col-sm-7">
                        <select id="labelType" name="labelType" class="form-control" form="createRoom" required=""
                                onclick="modifyDateFormat ( )">
                            <option value="year">Year</option>
                            <option value="month">Month</option>
                            <option value="day">Day</option>
                            <option value="hour">Hour</option>
                        </select>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label col-sm-2" for="dateFrom">Date from:</label>

                    <div class="col-sm-7">
                        <input id="dateFrom" name="dateFrom" type="date" placeholder="14/11/11" class="form-control"
                               value="">

                        <p class="help-block">Survey start day</p>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label col-sm-2 " for="dateTo">Date to:</label>

                    <div class="col-sm-7">
                        <input id="dateTo" name="dateTo" type="date" placeholder="14/11/12" class="form-control"
                               required="" onchange="modifyCanvas ( )">

                        <p class="help-block">Survey end date</p>
                    </div>
                </div>
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label col-sm-2 " for="dateTo">Max value</label>

                    <div class="col-sm-7">
                        <input id="maxValue" name="maxValue" type="number" value="3" class="form-control"
                               required="" onchange="modifyCanvasNumber ( )" min="3" max="10">

                        <p class="help-block">Y max value</p>
                    </div>
                </div>
                <input id="labels" name="labels" type="hidden" value="">
                <input id="values" name="values" type="hidden" value="">

                <div class="form-group">
                    <label class="control-label col-sm-2" for="name">Survey end day</label>

                    <div class="col-sm-7">
                        <input id="endDay" name="endDay" type="datetime-local" class="form-control" required=""
                               onChange="checkEndDay()">

                        <p class="help-block">Time of survey to end</p>
                    </div>
                </div>
                <!-- Button -->
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id="submit" name="submit" class="btn btn-default">Create</button>
                    </div>
                </div>

            </form>
        </div>
        <div class="col-md-6 column" name="container" id="container">
            <legend>Preview:</legend>
            <script src="@routes.Assets.at("js/Chart.min.js")"></script>
            <script src = "@routes.Assets.at("js/date.js")"></script>
            <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
            <canvas id="myChart" width="400" height="400"></canvas>
            <div class="form-group">
                <label class="control-label col-sm-2" for="buttonDelete">Delete column:</label>
            <div id="buttonDelete" class="btn-group btn-toggle">
                <button id="on" class="btn btn-xs btn-default" >ON</button>
                <button id="off" class="btn btn-xs btn-danger active" >OFF</button>
            </div>
                </div>
            <script>
            $('.btn-toggle').click(function() {
                $(this).find('.btn').toggleClass('active');
                if(! $("#on" ).hasClass("active")){
                canvas.onclick = function (evt) {
                var activePoints = myNewChart.getPointsAtEvent(evt);
                var rect = canvas.getBoundingClientRect();

                var x = evt.clientX - rect.left;
                var y = evt.clientY - rect.top;
                console.log(myNewChart.scale);
                var value = Math.round(Number((rect.height / y) - 1));
                if (value > myNewChart.scale.max) {
                value = myNewChart.scale.max;
                }
                myNewChart.datasets[0].points[labelToInt(myNewChart.scale.xLabels, activePoints[0].label)].value = value;
                myNewChart.update();
                };
                } else{
                canvas.onclick = function (evt) {
                var activePoints = myNewChart.getPointsAtEvent(evt);
                var i = labelToInt(myNewChart.scale.xLabels, activePoints[0].label);
                myNewChart.scale.xLabels.splice(i,1);
                myNewChart.datasets[0].points.splice(i,1);
                myNewChart.update();
                }
                }

                if ($(this).find('.btn-danger').size()>0) {
                    $(this).find('.btn').toggleClass('btn-danger');
                }
            });


                var ctx = document.getElementById("myChart").getContext("2d");

                var canvas = document.getElementById("myChart");
                var ctx = canvas.getContext("2d");
                var width = document.getElementById("container").offsetWidth;
                canvas.setAttribute("width", width);
                var data = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [{
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [1, 1, 1, 1, 1, 1, 1]
                    }
                    ]
                };

                var myNewChart = new Chart(ctx).Line(data, {
                    scaleOverride: true,
                    scaleSteps: 3,
                    scaleStepWidth: Math.ceil(3 / 3),
                    scaleStartValue: 0
                });


                canvas.onclick = function (evt) {
                    var activePoints = myNewChart.getPointsAtEvent(evt);
                    var rect = canvas.getBoundingClientRect();

                    var x = evt.clientX - rect.left;
                    var y = evt.clientY - rect.top;
                    console.log(myNewChart.scale);
                    var value = Math.round(Number((rect.height / y) - 1));
                    if (value > myNewChart.scale.max) {
                        value = myNewChart.scale.max;
                    }
                    myNewChart.datasets[0].points[labelToInt(myNewChart.scale.xLabels, activePoints[0].label)].value = value;
                    myNewChart.update();
                };

                function canvasCanDeleteLabel(){
                      canvas.onclick = function (evt) {
                      var activePoints = myNewChart.getPointsAtEvent(evt);
                          var i = labelToInt(myNewChart.scale.xLabels, activePoints[0].label);
                            myNewChart.scale.xLabels.splice(i,1);
                            myNewChart.datasets[0].points.splice(i,1);
                            myNewChart.update();
                      }
                }
                function readChart(){
                $("#labels" ).attr("value",myNewChart.scale.xLabels);
                var table = [];
                var pointsTable = myNewChart.datasets[0].points;
                for(var i in pointsTable){
                    table[i] = pointsTable[i].value;
                }
                $("#values" ).attr("value",table);
                }
                function labelToInt(labels, label) {
                    var i = 0;
                    for (var elem in labels) {
                        if (labels[elem] == label) return i;
                        else i++;
                    }
                    return NaN;
                }
                function modifyDateFormat() {
                    switch ($('#labelType').val()) {
                        case 'year':
                            $("#dateFrom").attr("type", "month");
                            $("#dateTo").attr("type", "month");
                            break;
                        case 'month':
                            $("#dateFrom").attr("type", "month");
                            $("#dateTo").attr("type", "month");
                            break;
                        case 'day':
                            $("#dateFrom").attr("type", "date");
                            $("#dateTo").attr("type", "date");
                            break;
                        case 'week':
                            $("#dateFrom").attr("type", "week");
                            $("#dateTo").attr("type", "week");
                            break;
                        case 'hour':
                            $("#dateFrom").attr("type", "time");
                            $("#dateTo").attr("type", "time");
                            break;
                    }
                }
                function monthDiff(d1, d2) {
                    var months;
                    months = (d2.getFullYear() - d1.getFullYear()) * 12;
                    months -= d1.getMonth() + 1;
                    months += d2.getMonth();
                    return months <= 0 ? 0 : months;
                }
                function createNewChart(label) {
                    myNewChart.clear();
                    myNewChart.destroy();
                    myNewChart.update();
                    data.labels = label;
                    var i = 0;
                    data.datasets[0].data = [];
                    label.forEach(function (e) {
                        data.datasets[0].data[i] = 1;
                        i++;
                    });
                    myNewChart = new Chart(ctx).Line(data);
                }
                function checkEndDay() {
                    var date = new Date($("#endDay").val());
                    var now = new Date();
                    console.log(date - now);
                    if ((date - now) <= 0) {
                        $("#endDay").attr("value", "");
                        alert("Wrong date of end survey");
                    }
                }
                function modifyCanvas() {
                    var dateFrom = $("#dateFrom");
                    var dateTo = $("#dateTo");
                    var objDateForm = new Date($("#dateFrom").val());
                    var objDateTo = new Date($("#dateTo").val());
                    var labelArray = [];
                    var date = 1000 * 60 * 60;
                    switch ($('#labelType').val()) {
                        case 'year':

                            var years = (objDateTo - objDateForm) / (date * 24 * 365);
                            for (var i = 0; i < years; i++) {
                                objDateForm.addYears(1);
                                labelArray[i] = objDateForm.toString("yyyy");
                            }
                            if (i > 1) {
                                createNewChart(labelArray)
                            }
                            else
                                alert("Wrong date")
                            break;
                        case "month":
                            var month = monthDiff(new Date(dateFrom.val()), new Date(dateTo.val()));
                            labelArray = [];

                            if (month > 12) {
                                for (var i = 0; i < month; i++) {
                                    objDateForm.addMonths(1);
                                    labelArray[i] = objDateForm.toString("MMMM-yyyy");
                                }
                            } else {
                                for (var i = 0; i < month; i++) {
                                    objDateForm.addMonths(1);
                                    labelArray[i] = objDateForm.toString("MMMM");
                                }
                            }

                            if (i > 1) {
                                createNewChart(labelArray)
                            } else {
                                alert("Wrong date range");
                            }

                            break;
                        case 'day':
                            var years = (objDateTo - objDateForm) / (date * 24);
                            for (var i = 0; i < years; i++) {
                                objDateForm.addDays(1);
                                labelArray[i] = objDateForm.toString("dd-MM-yyyy");
                            }
                            if (i > 1) {
                                createNewChart(labelArray)
                            }
                            else
                                alert("Wrong date")
                            break;
                    }
                    var width = document.getElementById("container").offsetWidth;
                    canvas.setAttribute("width", width);
                }
                function modifyCanvasNumber() {
                    var max = $("#maxValue").val();
                    myNewChart.destroy();

                    var myNewChart = new Chart(ctx).Line(data, {
                        scaleOverride: true,
                        scaleSteps: max,
                        scaleStepWidth: 1,
                        scaleStartValue: 0
                    });
                    myNewChart.update();
                }

            </script>
        </div>
    </div>
</div>
}