<div class="bootstrap-wrapper">
    <div wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="loading">
        <div class="page-header" style="margin-top:45px;">
            <h1><i class="fa fa-edit page-header-icon"></i>&nbsp;&nbsp;{{title | translate}}</h1>
        </div>
        <div class="col-md-12">
            <form name="editForm" novalidate>
                <div>
                    <div class="row">
                        <div class="col-md-2">
                            {{'Type' | translate}}
                        </div>
                        <div class="col-md-10">
                            <select ng-model="quiz.quizType" class="form-control" ng-change="getFields()" ng-disabled="quiz.fields.length || quiz.actions.length">
                                <option ng-value="1" value="1">{{'Competition(Draw a winner with correct answer)' | translate}}</option>
                                <option ng-value="4" value="4">{{'Competition(Draw a winner from all responses)' | translate}}</option>
                                <option ng-value="2" value="2">{{'Quiz(See score)' | translate}}</option>
                                <option ng-value="3" value="3">{{'Questionnaire' | translate}}</option>
                                <!--OBS!!!! TYPE 5 == POLL-->
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Title' | translate}}
                        </div>
                        <div class="col-md-10 checkinput">
                            <input type="text" name="title" class="form-control" data-ng-model="quiz.title" required />
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Description' | translate}}
                        </div>
                        <div class="col-md-10 checkinput">
                            <textarea type="text" name="title" class="form-control inputForm" data-ng-model="quiz.description" required ></textarea>
                        </div>
                    </div>
                    <br />
                    <!--
                    <div class="row">
                        <div class="col-md-2">
                            {{'Banner' | translate}}
                        </div>
                        <div class="col-md-10">
                            <input type="hidden" name="hidden" class="form-control" data-ng-model="quiz.logo" required />
                            <div class="dropdown">
                                <a class="btn btn-default" data-toggle="dropdown" href="">
                                    <span ng-hide="quiz.logo">{{'Select banner' | translate}}</span>
                                    <span ng-show="quiz.logo"><img height="30" width="50" ng-src="{{quiz.logo}}" /></span>
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
                                    <li ng-repeat="flag in flags track by $index" ng-click="quiz.logo = flag.path">
                                        <a href=""><img height="30" width="50" ng-src="{{flag.path}}" /></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>-->
                    <br />
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="startDate">{{'Start date' | translate}}</label>
                            <div style="margin-top:-30px;" wizdom365-datetime-picker="" disable-previously-dates="true" date="quiz.startDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="endDate">{{'End date' | translate}}</label>
                            <div style="margin-top:-30px;" wizdom365-datetime-picker="" min-date="quiz.startDate" date="quiz.endDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Can response be edited' | translate}}
                        </div>
                        <div class="col-md-10 checkinput">
                            <input type="checkbox" ng-model="quiz.canEdit">
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">{{'Is anonymous' | translate}}</div>
                        <div class="col-md-10 checkinput">
                            <input type="checkbox" ng-model="quiz.isAnonymous">
                        </div>
                    </div>
                    <!--
                    <div class="row">
                        <div class="col-md-2">
                            {{'Enable comment feed' | translate }}
                        </div>
                        <div class="col-md-10 checkinput">
                            <input type="checkbox" ng-model="quiz.useSocial">
                        </div>
                    </div>
                    <br />-->
                    <div class="row">
                        <div class="col-md-2">
                            {{'Can users see all responses' | translate}}
                        </div>
                        <div class="col-md-10 checkinput">
                            <input type="checkbox" ng-model="quiz.showOverview">
                        </div>
                    </div>
                    <br />
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Users' | translate}}
                        </div>
                        <div class="col-md-10">
                            <div wizdom365-principalpicker principals="quiz.groups" allowwizdomgroups="true" class="principal-picker"></div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Administrators'  | translate}}
                        </div>
                        <div class="col-md-10">
                            <div wizdom365-principalpicker principals="quiz.admins" allowwizdomgroups="true" class="principal-picker"></div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Fields' | translate}}
                        </div>
                        <div class="col-md-10">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3"><button class="btn" type="button" ng-click="addNewField();" ng-disabled="!addfield.new">{{'Add Field' | translate}}</button></label>
                                    <div class="col-sm-4">
                                        <select ng-model="addfield.new" class="form-control">
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="textfield">{{'textfield' | translate}}</option>
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="email">{{'email' | translate}}</option>
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="password">{{'password' | translate}}</option>
                                            <option value="radio">{{'radio' | translate}}</option>
                                            <option value="dropdown">{{'dropdown' | translate}}</option>
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="checkbox">{{'checkbox' | translate}}</option>
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="date">{{'date' | translate}}</option>
                                            <option ng-if="quiz.quizType == 3 || quiz.quizType == 4" value="textarea">{{'textarea' | translate}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div ng-hide="quiz.fields.length">
                                <span>{{'No fields added' | translate}}</span>
                            </div>
                            <div ng-show="quiz.fields.length">
                                <accordion close-others="true">
                                    <accordion-group heading="{{field.title}}" ng-repeat="field in quiz.fields track by $index">
                                        <div>
                                            <div class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <button class="btn btn-danger pull-right" style="margin-right:10px;" type="button" ng-click="deleteField($index)"><span class="glyphicon glyphicon-trash"></span> {{'Delete' | translate}}</button>
                                                    <label class="col-sm-2">{{'Field type' | translate}}:</label>
                                                    <div class="col-sm-6">
                                                        {{field.type | translate}}
                                                    </div>
                                                </div>
                                                <hr />
                                                <div class="form-group">
                                                    <label class="col-sm-2">{{'Title' | translate}}:</label>
                                                    <div class="col-sm-6">
                                                        <input class="form-control" type="text" ng-model="field.title" value="{{field.title}}">
                                                    </div>
                                                </div>
                                                <div class="form-group" ng-show="quiz.quizType==2">
                                                    <label class="col-sm-2">{{'Points for a correct answer' | translate}}:</label>
                                                    <div class="col-sm-6">
                                                        <select ng-model="field.point" ng-options="point for point in points" class="form-control"></select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2">{{'Required' | translate}}:</label>
                                                    <div class="col-sm-10">
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" ng-value="true" ng-selected ng-model="field.required" />{{'Yes' | translate}}
                                                            </label>
                                                        </div>
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" ng-value="false" ng-model="field.required" /> {{'No' | translate}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group" ng-show="showAddOptions(field)">
                                                    <label class="col-sm-2">{{'Options' | translate}}:</label>
                                                    <div class="col-sm-10">
                                                        <div ng-show="!field.options.length">{{'No options added' | translate}}</div>
                                                        <form class="form-horizontal" role="form" ng-model="field.options">
                                                            <div class="form-group" ng-repeat="option in field.options">
                                                                <input type="hidden" ng-value="option.value = $index" />
                                                                <table>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="col-sm-12">
                                                                                <input class="form-control" type="text" ng-model="option.title">
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, $index)"><span class="glyphicon glyphicon-minus"></span></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                        </form>
                                                        <button class="btn btn-primary btn-small" type="button" ng-click="addOption(field)"><span class="glyphicon glyphicon-plus"></span> {{'Add option' | translate}}</button>
                                                    </div>
                                                </div>
                                                <div class="form-group" ng-show="quiz.quizType==2 || quiz.quizType==1">
                                                    <label class="col-sm-2">{{'Corret answer' | translate}}:</label>
                                                    <div class="col-sm-10" ng-model="field.correctAnswer">
                                                        <div ng-show="!field.options.length">
                                                            {{'Please add a option above' | translate}}
                                                        </div>
                                                        <div class="radio" ng-repeat="option in field.options">
                                                            <label>
                                                                <input type="radio" ng-value="{{$index}}" data-ng-model="$parent.field.correctAnswer" /> {{option.title}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </accordion-group>
                                </accordion>
                            </div>
                        </div>
                    </div>

                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            {{'Actions' | translate}}
                        </div>
                        <div class="col-md-10">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3"><button type="button" ng-disabled="!newAction>0" class="btn" ng-click="addNewAction()">{{'Add action' | translate}}</button></label>
                                    <div class="col-sm-4">
                                        <select ng-model="newAction" class="form-control">
                                            <option value="1" ng-if="quiz.quizType==2">{{'Add skill on answer' | translate}}</option>
                                            <option value="2" ng-if="quiz.quizType==2 || quiz.quizType==1">{{'Add badge on correct answer' | translate}}</option>
                                            <option value="3" ng-if="quiz.quizType==2 || quiz.quizType==1">{{'Add certificate on correct answer' | translate}} </option>
                                            <option value="4">{{'Add badge on answer' | translate}}</option>
                                            <option value="5">{{'Add certificate on answer' | translate}}</option>
                                            <option value="6" ng-if="quiz.quizType==2">{{'Add badge on highscore' | translate}}</option>
                                            <option value="7" ng-if="quiz.quizType==2">{{'Add certificate on highscore' | translate}}</option>
                                            <option value="8" ng-if="quiz.quizType==4 || quiz.quizType==1">{{'Add badge on drawn winner' | translate}}</option>
                                            <option value="9" ng-if="quiz.quizType==4 || quiz.quizType==1">{{'Add certificate on winner' | translate}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div ng-hide="quiz.actions.length">
                                <span>{{'No action created yet' | translate}}</span>
                            </div>
                            <div ng-show="quiz.actions.length">
                                <accordion close-others="true">
                                    <accordion-group heading="{{getName(action.action) | translate}}" ng-repeat="action in quiz.actions track by $index">
                                        <div>
                                            <div class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <button class="btn btn-danger pull-right" style="margin-right:10px;" type="button" ng-click="deleteAction($index)"><span class="glyphicon glyphicon-trash"></span> {{'Delete' |translate}}</button>
                                                </div>
                                                <hr />
                                                <div class="form-group" ng-show="action.action == 1">
                                                    <label class="col-sm-2">{{'Select skill' | translate}}</label>
                                                    <div class="col-sm-6">
                                                        <select ng-model="action.achievementId" class="form-control">
                                                            <option value="{{a.id}}" ng-repeat="a in skills track by $index" ng-selected="a.id == action.achievementId">{{a.title}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group" ng-show="action.action == 3 || action.action == 5 || action.action == 7 || action.action == 9">
                                                    <label class="col-sm-2">{{'Select certificate' | translate}}</label>
                                                    <div class="col-sm-6">
                                                        <select ng-model="action.achievementId" class="form-control">
                                                            <option value="{{a.id}}" ng-repeat="a in certificates track by $index" ng-selected="a.id == action.ahievementId">{{a.title}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group" ng-show="action.action == 2 || action.action == 4 || action.action == 6 || action.action == 8">
                                                    <label class="col-sm-2">{{'Select badge' | translate}}</label>
                                                    <div class="col-sm-6">
                                                        <select ng-model="action.AchievementId" class="form-control">
                                                            <option value="{{a.id}}" ng-repeat="a in badges track by $index" ng-selected="a.id == action.achievementId">{{a.title}}</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </accordion-group>
                                </accordion>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-primary" data-ng-click="saveQuiz()" ng-disabled="editForm.$invalid">{{buttonText | translate}}</button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-danger" data-ng-if="quiz.id > 0" data-ng-click="deleteQuiz()">{{'Delete' | translate}}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
