<div class="bootstrap-wrapper gamification">
    <div ng-show="loading" wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="loading">
        <div class="page-header">
            <h1><i class="fa fa-edit page-header-icon"></i>&nbsp;&nbsp;{{title | translate}}</h1>
        </div>
        <form name="editForm" novalidate class="form-horizontal">
            <!--
            <div class="row" ng-show="tournament.id==0">
                <div class="col-md-2">
                    {{'Type' | translate }}
                </div>
                <div class="col-md-10">
                    <select ng-model="betType" ng-change="reset()" name="type" ng-options="t.name for t in types" class="form-control"></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="tournament.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="desc" class="form-control inputForm" data-ng-model="tournament.description" required />
                </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="tournament.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="tournament.startDate" date="tournament.endDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-2">
                    {{'Amount' | translate }}
                </div>
                <div class="col-md-10 checkinput">
                    <input type="number" name="amount" class="form-control" data-ng-model="tournament.amount" ngMinlength="0" min="0" required />
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-2">
                    {{'Tournament users' | translate}}
                </div>
                <div class="col-md-10">
                    <div wizdom365-principalpicker principals="tournament.groups" allowwizdomgroups="true" class="principal-picker"></div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-2">
                    {{'Tournament administrators' | translate}}
                </div>
                <div class="col-md-10">
                    <div wizdom365-principalpicker principals="tournament.admins" allowwizdomgroups="true" class="principal-picker"></div>
                </div>
            </div>
            <br />
            <!--
            <div class="row" ng-show="betType.value==2 && tournament.id == 0">
                <div class="col-md-2">
                    {{ 'Use provider' | translate}}
                </div>

                <div class="col-md-10">
                    <input type="radio" ng-model="useProvider" value="yes" ng-click="getSports()">  {{'Yes' | translate}} <br />
                    <input type="radio" ng-model="useProvider" value="no"> {{'No' | translate}} <br />
                    <select ng-show="useProvider == 'yes'" ng-model="sport" ng-options="t.title for t in sports | wizdom365GfOrderObjectBy:'title':false" class="form-control" ng-change="getLeagues()"></select>
                    <select ng-show="useProvider == 'yes'" ng-model="league" ng-options="t.title for t in leagues | wizdom365GfOrderObjectBy:'title':false" class="form-control"></select>
                </div>
            </div>-->
            <br />
            <div class="row">
                <div class="col-md-2">
                    {{'Teams' | translate}}
                </div>
                <div class="col-md-10">
                    <span ng-show="!tournament.teams.length">{{'No teams added' | translate}}</span>
                    <ul style="list-style-type: none;">
                        <li ng-repeat="team in tournament.teams track by $index" style="margin-left: -40px">
                            <div ng-hide="team.edit">
                                <span><img height="11" width="16" ng-src="{{team.flag}}" ng-show="team.flag" />  {{team.title}}</span>
                                <span class="glyphicon glyphicon-trash showHand" ng-click="removeTeam($index)"></span>
                                <span class="glyphicon glyphicon-edit showHand" ng-click="setEdit(team,true)"></span>
                            </div>
                            <div ng-if="team.edit" class="form-group">
                                <input type="text" class="form-control" data-ng-model="team.title" style="display:inline" />
                                <div class="dropdown" dropdown style="display:inline">
                                    <a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
                                        <span ng-hide="team.flag">{{'Select team logo' | translate}}</span>
                                        <span ng-show="team.flag"><img height="11" width="16" ng-src="{{team.flag}}" /></span>
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
                                        <li ng-repeat="flag in flags" ng-click="team.flag = flag.path">
                                            <a href=""><img height="11" width="16" ng-src="{{flag.path}}" /> {{flag.name}}</a>
                                        </li>
                                    </ul>
                                </div>
                                <span class="glyphicon glyphicon-floppy-disk showHand" ng-click="setEdit(team,false)"></span>
                            </div>
                        </li>
                    </ul>
                    <input type="text" class="form-control" data-ng-model="newTeam.title" style="display:inline" />
                    <div class="dropdown" dropdown style="display:inline">
                        <a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
                            <span ng-hide="newTeam.flag">{{'Select team logo' | translate}}</span>
                            <span ng-show="newTeam.flag"><img height="11" width="16" ng-src="{{newTeam.flag}}" /></span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
                            <li ng-repeat="flag in flags" ng-click="newTeam.flag = flag.path">
                                <a href=""><img height="11" width="16" ng-src="{{flag.path}}" /> {{flag.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <br /><br />
                    <button type="button" class="btn btn-primary" data-ng-click="addTeam()" ng-disabled="!newTeam.title">{{'Add team' | translate}}</button>
                </div>
            </div>
            <br />
            <div class="row">
                <!--GAMES-->
                <div class="col-md-2">
                    {{'Games' | translate}}
                </div>
                <div class="col-md-10">
                    <span ng-show="!tournament.games.length">{{'No games added. Click' | translate}} <a href="" ng-click="addGame()">{{'here' | translate}}</a> {{'to add a game' | translate}}</span>
                    <accordion close-others="true">
                        <accordion-group heading="{{getTeam(game.teamOne).title}} vs. {{getTeam(game.teamTwo).title}}" ng-repeat="game in tournament.games">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Team one' | translate}}</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" required ng-model="game.teamOne" />
                                        <div class="dropdown" dropdown style="display:inline">
                                            <a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
                                                <span ng-hide="game.teamOne">{{'Select team one' | translate}}</span>
                                                <span ng-show="game.teamOne"><img height="11" width="16" ng-src="{{getTeam(game.teamOne).flag}}" ng-if="getTeam(game.teamOne).flag" /> {{getTeam(game.teamOne).title}}</span>
                                                <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
                                                <li ng-repeat="team in tournament.teams track by $index" ng-click="game.teamOne = team.guid" ng-hide="team.guid == game.teamTwo">
                                                    <a href=""><img height="11" width="16" ng-src="{{team.flag}}" ng-if="team.flag" />  {{team.title}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Team two' | translate}}</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" required ng-model="game.teamTwo" />
                                        <div class="dropdown" dropdown style="display:inline">
                                            <a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
                                                <span ng-hide="game.teamTwo">{{'Select team two' | translate}}</span>
                                                <span ng-show="game.teamTwo"><img height="11" width="16" ng-src="{{getTeam(game.teamTwo).flag}}" ng-if="getTeam(game.teamTwo).flag" /> {{getTeam(game.teamTwo).title}}</span>
                                                <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
                                                <li ng-repeat="team in tournament.teams track by $index" ng-click="game.teamTwo = team.guid" ng-hide="team.guid == game.teamOne">
                                                    <a href=""><img height="11" width="16" ng-src="{{team.flag}}" ng-if="team.flag" />  {{team.title}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Start date' | translate}}</label>
                                    <div class="col-sm-10">
                                        <div class="input-group" style="max-width:300px;">
                                            <div style="margin-top:-30px;" wizdom365-datetime-picker="" disable-previously-dates="true" date="game.startDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Odds team one' | translate}}</label>
                                    <div class="col-sm-10">
                                        <input type="number" style="max-width:300px;" class="form-control" ng-model="game.oddsTeamOne" ng-required="true" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Odds team two' | translate}}</label>
                                    <div class="col-sm-10">
                                        <input type="number" style="max-width:300px;" class="form-control" ng-model="game.oddsTeamTwo" ng-required="true" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{'Odds draw' | translate}}</label>
                                    <div class="col-sm-10">
                                        <input type="number" style="max-width:300px;" class="form-control" ng-model="game.oddsDraw" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-warning" ng-click="deleteGame($index)"><span class="glyphicon glyphicon-trash"></span> {{'Delete game' | translate}} </button>
                        </accordion-group>
                    </accordion>
                    <button type="button" class="btn btn-primary" ng-show="tournament.games.length" ng-click="addGame()">{{'Add game' | translate}}</button>
                    <br />
                </div>
            </div><!--END GAMES-->
            <br />
            <!--Start custombets-->
            <div class="row">
                <div class="col-md-2">
                    {{'Special bets' | translate}}
                </div>
                <div class="col-md-10">
                    <div class="row">
                        <span ng-show="!tournament.specialGames.length">{{'No special bets added. Click' | translate}} <a href="" ng-click="addCustomBet()">{{'here' | translate}}</a> {{'to add a special bet' | translate}}</span>
                        <accordion close-others="true">
                            <accordion-group heading="{{bet.title}}" ng-repeat="bet in tournament.specialGames">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">{{'Title' | translate}}</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="max-width:300px;" class="form-control" ng-model="bet.title" ng-required="true" />
                                        </div>
                                    </div><br /><br />
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">{{'Start date' | translate}}</label>
                                        <div class="col-sm-10">
                                            <div class="input-group" style="max-width:300px;">
                                                <div style="margin-top:-30px;" wizdom365-datetime-picker="" disable-previously-dates="true" date="bet.startDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2">{{'Options' | translate}}</label>
                                        <div class="col-sm-10">
                                            <div ng-show="!bet.bettingOptions.length">{{'No options added' | translate}}</div>
                                            <div class="form-horizontal" role="form">
                                                <div class="form-group" ng-repeat="option in bet.bettingOptions">
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                <div class="col-sm-12">
                                                                    <input class="form-control" required type="text" ng-model="option.title" placeholder="{{'Title' | translate}}">
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <input type="number" class="form-control" required ng-model="option.odds" placeholder="{{'Odds' | translate}}" />
                                                            </td>
                                                            <td>
                                                                <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteCustomBetOption($index, bet)"><span class="glyphicon glyphicon-minus"></span></a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <br />
                                <div class="row">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn btn-primary" ng-click="addOption($index)">{{'Add option' | translate}}</button>
                                        <button type="button" class="btn btn-warning" ng-click="deleteCustomBet($index)"><span class="glyphicon glyphicon-trash"></span> {{'Delete specialbet' | translate}} </button>
                                    </div>
                                </div>
                            </accordion-group>
                        </accordion>
                    </div>
           
                    <button type="button" class="btn btn-primary" ng-show="tournament.specialGames.length" ng-click="addCustomBet()">{{'Add special bet' | translate}}</button>
                </div>
            </div>
            <br />
            <div class="row">
                <!--Actions-->
                <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" class="btn btn-primary" ng-disabled="!newAction>0" ng-click="addNewAction()">{{'Add action' | translate}}</button></label>
                            <div class="col-sm-4">
                                <select ng-model="newAction" class="form-control">
                                    <option value="10">{{'Add badge on tournament highscore' | translate}}</option>
                                    <option value="11">{{'Add certificate on tournament highscore' | translate}}</option>
                                    <option value="12>{{'Add badge on most active' | translate}}</option>
                                    <option value="13">{{'Add certificate on most active' | translate}}</option>
                                    <option value="14">{{'Add badge on highest avg. odds' | translate}}</option>
                                    <option value="15">{{'Add certificate on highest avg. odds' | translate}}</option>
                                    <option value="16">{{'Add badge on highest avg. amount' | translate}}</option>
                                    <option value="17">{{'Add certificate on highest avg. amount' | translate}}</option>
                                    <option value="18">{{'Add badge on most winning' | translate}}</option>
                                    <option value="19">{{'Add certificate on most winning' | translate}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div ng-hide="tournament.actions.length">
                        <span>{{'No action created yet' | translate}}</span>
                    </div>
                    <div ng-show="tournament.actions.length">
                        <accordion>
                            <accordion-group heading="{{getName(action.action) | translate}}" ng-repeat="action in tournament.actions">
                                <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 == 11 || action.action == 13 || action.action == 15 || action.action == 17 || action.action == 19">
                                            <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" ng-selected="a.id == action.achievementId">{{a.title}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group" ng-show="action.action == 10 || action.action == 12 || action.action == 14 || action.action == 16 || action.action == 18">
                                            <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" ng-selected="a.id == action.achievementId">{{a.title}}</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </accordion-group>
                        </accordion>
                    </div>
                </div>
            </div><!--Actions end-->
            <br /><br />
            <div class="row" style="margin-bottom:15px;">
                <div class="col-md-12">
                    <button type="button" class="btn btn-primary" data-ng-click="saveTournament()" ng-disabled="editForm.$invalid">{{buttonText | translate}}</button>
                    &nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-ng-if="tournament.id > 0" data-ng-click="deleteTournament()">{{'Delete tournament' | translate}}</button>
                </div>
            </div>
        </form>
    </div>
</div>