@model MedianderProject.Models.CreatePassportViewModel

@{
    ViewBag.Title = "Create";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/magic-check-master/css/magic-check.css" rel="stylesheet" />


<script>
    $(document).ready(function () {
        //initialiseren tooltips
        $('[data-toggle="tooltip"]').tooltip();

        //Aantal variabelen ophalen
        var atlTopics = $("#atlTopics").val();
        var percentageToRaise = 100 / atlTopics;
        var progressbar = $("#progressBar");
        $("#progressBar").attr('style', 'width:0%;');

        //Execute disable function
        checkButtonsOnDisable(1);

        //Klik op navigatietabs
        $(".bar").click(function (event) {

            var clickedTab = $(this).data('volgorde');
            updateProgressBar(clickedTab);
        });

        function checkButtonsOnDisable(activeTab) {

            if (activeTab <= 1) {
                $("#btnVorigePagina").attr("disabled", "disabled");
            }
            else {
                $("#btnVorigePagina").removeAttr("disabled");
            }

            if (activeTab >= atlTopics) {
                $("#btnVolgendePagina").attr("disabled", "disabled");
            }
            else {
                $("#btnVolgendePagina").removeAttr("disabled");
            }
        }

        //Progressbar updaten en buttons aanpassen
        function updateProgressBar(number) {
            var clickedTab = number;
            var numberOnBar = Math.round(percentageToRaise * (clickedTab - 1));
            progressbar.removeAttr('style');
            progressbar.attr('style', 'width:' + numberOnBar + '%;');
            progressbar.html(numberOnBar + '%');
            checkButtonsOnDisable(clickedTab);
        }

        //Klikken op een radiobutton ==> overeenkomende tekstbox invullen
        $(".rbtAnswer").click(function (event) {
            var clickedId = $(this).data('answerid');
            console.log(clickedId);
            $("#" + clickedId).val($(this).val());
        });

        //Klik op knop vorige ==> vorige tab openen
        $("#btnVorigePagina").click(function () {
            var number = $(".active.bar").data('volgorde');
            if (number > 1) {
                updateView(number, false);
                number--;
                $("#tab_" + number).trigger("click");
            }
        });

        //Klik op knop volgende ==> volgende tab openen
        $("#btnVolgendePagina").click(function () {
            var number = $(".active.bar").data('volgorde');
            if (number < atlTopics) {
                number++;
                $("#tab_" + number).trigger("click");
                updateView(number - 1, true);
            }
        });

        //Functie om de juiste divs onderaan te tonen
        function updateView(number, increase) {
            var activeTab = number;

            $("#tab_" + activeTab).removeClass("active");
            $("#" + activeTab).removeClass("active");
            $("#" + activeTab).removeClass("in");

            if (increase) {
                activeTab++;
            }
            else {
                activeTab--;
            }

            var href = '#' + activeTab;
            $("#tab_" + activeTab).addClass("active");
            $("#" + activeTab).addClass("active");
            $("#" + activeTab).addClass("in");
            window.location.href = href;
        }


    });
</script>

<h2>Paspoort Aanmaken</h2>
<h4>Bij het beantwoorden van de vragen zijn er 3 mogelijkheden:</h4>






<form>
    @Html.Hidden("atlTopics", Model.Topics.Count().ToString())
</form>


<div class="panel with-nav-tabs panel-primary">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            @{
                int counter = 1;

                foreach (var item in Model.Topics)
                {

                    if (item == Model.Topics.First())
                    {
                        <li class="active bar" data-volgorde="@counter" id="tab_@counter"><a href="#@counter" data-toggle="tab">@Html.DisplayFor(modelItem => item.name)</a></li>
                    }
                    else
                    {
                        <li data-volgorde="@counter" class="bar" id="tab_@counter"><a href="#@counter" data-toggle="tab">@Html.DisplayFor(modelItem => item.name)</a></li>
                    }

                    counter++;
                }

            }
        </ul>
    </div>
    <br />
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" id="progressBar">
            0%
        </div>
    </div>

    <div class="panel-body">
        <div class="tab-content">
            <!--Loop over topics-->
            @{
                counter = 1;

                using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    foreach (var item in Model.Topics)
                    {
                    <!--Indien eerste topic ==> tab active zetten-->
                        if (item == Model.Topics.First())
                        {
                            <div class="tab-pane fade in active" id="@counter">
                                <div class="panel panel-primary borderPanel">
                                    <div class="panel-heading greyHeader">Info</div>
                                    <div class="panel-body">
                                        <ul>
                                            <li>Duid één van de voorbeelden aan.</li>
                                            <li>Vul het tekstvak zelf in.</li>
                                            <li>Wens je dit item niet weer te geven op het communicatiepaspoort, duid het vakje 'niet van toepassing aan'.</li>
                                        </ul>
                                    </div>
                                </div>
                                <table class="inputTable">
                                    <!--Loop over questions-->
                                    @foreach (var question in Model.Questions)
                                    {
                                        if (question.topicId == item.id)
                                        {
                                            <tr>
                                                <td>
                                                    @*data-toggle="tooltip" data-placement="right"*@
                                                    <h3 for="@question.id" data-toggle="tooltip" data-placement="right" title="@question.tooltip"> @question.description </h3>



                                                    @*@Html.EditorFor(model => model.Answer.description, new { htmlAttributes = new { @class = "form-control" } })
                                                    @Html.ValidationMessageFor(model => model.description, "", new { @class = "text-danger" })*@

                                                    <input type="text" id="@question.id" name="@question.id" class="textInputMarkup" data-toggle="tooltip" data-placement="right" title="@question.tooltip" />
                                                    @if (question.isMultiplechoice)
                                                    {
                                                        <br />
                                                        <br />
                                                    }

                                                    @foreach (var multipleChoiceAnswer in question.multiplechoiceAnswer)
                                                    {
                                                        @*<input class="magic-radio rbtAnswer" data-answerid="@question.id" type="radio" name="answer_@question.id" id="2" value="@multipleChoiceAnswer.description">
                                                            <label for="answer_@question.id">
                                                                @multipleChoiceAnswer.description
                                                            </label>*@
                                                        <input class="rbtAnswer" data-answerid="@question.id" type="radio" name="answer_@question.id" value="@multipleChoiceAnswer.description"> @multipleChoiceAnswer.description
                                                        <br>
                                                    }

                                                </td>
                                            </tr>
                                        }
                                    }
                                </table>

                            </div>
                        }
                        else
                        {
                    <!--Indien niet eerste topic, tab gewoon aanmaken-->
                            <div class="tab-pane fade" id="@counter">
                                <table>
                                    <!--Loop over vragen-->
                                    @foreach (var question in Model.Questions)
                                    {
                                        if (question.topicId == item.id)
                                        {
                                            <tr>
                                                <td>
                                                    @Html.DisplayFor(modelItem => question.id)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => question.description)
                                                </td>
                                            </tr>
                                        }
                                    }
                                </table>
                            </div>
                        }

                        counter++;
                    }
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                }

            }

            <button type="button" class="btn btn-primary" id="btnVorigePagina">&lt; Vorige</button>
            <button type="button" class="btn btn-primary" id="btnVolgendePagina" style="float: right;">Volgende &gt;</button>

        </div>



    </div>
</div>



@*<div class="container">
    <h2>Collapsible Panel</h2>
    <p>Click on the collapsible panel to open and close it.</p>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Panel Body</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>
    </div>
</div>*@