<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
    
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    
<div class="col-md-12" ng-controller="MappingLimits">
    <div style="padding-left: 10px">
        <h3>Limit Mapping</h3>
        <p id="errorMessage" style="padding: 3px" class="padded15" ng-show="errorMessage">{{errorMessage}}</p>
    </div>
         
        
        <br />
        <br />
      
        
       
            
        <pagination style="padding-left: 10px" total-items="totalItems" ng-model="currentPage" boundary-links="true" items-per-page="itemsPerPage" max-size="maxSize" rotate="false"></pagination>
       
        <div class="col-md-12 limitObjects">
             <h4>Limit Object: </h4>
             <div style="overflow: auto; max-height: 500px; height: 100%">
            <table border="0" class="table-bordered myTable" >
                <tbody>
                 
               <tr ng-repeat="item in userMappings" ng-model="item">
                
                   
                        <td class="col-md-4">
                            {{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}}) {{item.mapped}}
                        </td>
                        
                        <td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" >
                            <h4>Mapping Type: <span style="font-size:0.8em">{{mapping.name}}</span> </h4> 
                          <br />
                          <select ng-model="item.mapping" ng-change="which(item, $index, event)" ng-options="mapping.name for mapping in mappingType" se-change=''></select>
                           <br />
                            <br />
                        </td>
                        
                        <td class="col-md-4" style="padding-bottom: 25px; padding-left: 10px">
                            <h4>Available Items:</h4>
                            <span style="font-size: 0.8em" ng-show="modelState.amLoadingLeagues"><br /><img src="/img/ajax-loader.gif">Leagues are loading...</span> 
                            
                            <br />
                            
                          <select ng-show="item.buau" ng-model="sport" ng-change="getID(sport, $index, $event); table($event)"  ng-options="sport.name for sport in sportsList"></select>
                            
                          <select ng-show="item.buau == false" ng-model="sportLeague" ng-change="getLeaguecategories($event, sportLeague, $index)" ng-options="sportLeague.name for sportLeague in sportsList" style="float: left;"></select>
                            
                         
                       <br /> 
                         <br/>
                             
                            <select ng-show="item.buau == false"  ng-model="selectedLeague" ng-change="getID( item, selectedLeague, $index )" ng-options="selectedLeague.name for selectedLeague in leagueList" ></select>
                         
                        </td>
                        
                        <td class="col-md-4" style="padding-bottom: 25px; padding-left: 15px">
                            <h4>Subjects: </h4>
                            <br />
                            <select ng-model="subject" ng-change="getsubjectID(subject, $index)" ng-options="subject.description for subject in limitSubject"></select>
                            <br />
                            <br />
                    
                        </td>
                        
                        
                        
                    </tr>

                </tbody>
            </table>
                

                

        </div>

       

</div>
</div>
  </body>

</html>
var app = angular.module("myApp", []);






app.controller('MappingLimits', function($scope) { 
   




$scope.mappingType = [{name: "Sport"}, {name: "League"}, {name: "No Mapping"}];

$scope.sportsList = [{id : 34, name : "[Default]"}, {id: 15, name : "Alpine Skiing"}, { id : 8,  name : "American Football" }, { id : 23,  name : "Australian Rules"}];

$scope.getLeaguecategories = function( item ){
  
 $scope.leagueList = [{"name": "NFL"}, {"name": "NCAA"}, {"name": "All others"}];
  console.log(detail);
  
  
  
  
  
}


$scope.userMappings = [{"id":"1","idgametype":"81","idsport":"NFL","mapped":"0","name":"Side","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"2","idgametype":"81","idsport":"NFL","mapped":"4","name":"Total","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"3","idgametype":"81","idsport":"NFL","mapped":"0","name":"IfBets","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"4","idgametype":"81","idsport":"NFL","mapped":"0","name":"MoneyLine","online":"1","profilelimitkeyid":"1","value":"2000"},{"id":"5","idgametype":"81","idsport":"NFL","mapped":"1","name":"Parlays","online":"1","profilelimitkeyid":"1","value":"700"},{"id":"6","idgametype":"81","idsport":"NFL","mapped":"0","name":"Related","online":"1","profilelimitkeyid":"1","value":"0"},{"id":"7","idgametype":"81","idsport":"NFL","mapped":"0","name":"Reverses","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"8","idgametype":"81","idsport":"NFL","mapped":"2","name":"Teasers","online":"1","profilelimitkeyid":"1","value":"0"}];



$scope.which = function( item, index ) {



  if ( item.mapping.name === "Sport" ){
        
      item.buau = true;
  
            
  } else if ( item.mapping.name === "League" ) {
           item.buau = false;
           
  } else if ( item.mapping.name === "No Mapping" ){
          
            
  }
    
        

}











});

/* Styles go here */