@(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">

                <!-- 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>

                <!-- 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 day</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="">
                <!-- 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>
                <script>
                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;

                };
                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 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();
                var myNewChart = new Chart(ctx).Line(data,{
                scaleOverride: true,
                scaleSteps: max,
                scaleStepWidth: 1,
                scaleStartValue: 0
                });
                }

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