<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    var MojtabaApp = angular.module('MojtabaApp', ['ngRoute']);
    // API for routing.
    MojtabaApp.config(function($routeProvider) {
        $routeProvider.
            when('/', {
                template: '<P>Hi, I am root! {{customer.name}}</p>',
                controller: 'MojtabaCtrl'
            }).
            when('/:name', {
                template: '<h1>To do create</h1>',
                controller: 'MojtabaCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        });

    MojtabaApp.controller('MojtabaCtrl', function ($scope,$http){
        $scope.Foods = [];
        $scope.sum = function(items, prop) {
            return items.reduce( function(a, b){
                return a + b[prop];
            }, 0);
        };
        $scope.addToChart = function(food) {
            $scope.Foods.push(angular.copy(food));
        };
        $scope.removeFoods = function(f) {
            var i = $scope.Foods.indexOf(f);
            $scope.Foods.splice(i, 1);
        };
        $scope.limit = 2;
        $scope.checkChanged = function(meal) {
            var total = 0;
            //loop through the options for this meal and count up the number of selected
            for(var i=0; i<meal.option.length; i++){
              if(meal.option[i].selected)
                total++
            }
            //then store that value on the meal object
            meal.totalSelected = total;
        }
        $scope.submitForm = function(ok) {
            if(ok) {
                alert('your form is amazing');
                $http.post('http://www.yourdomain.com/api/something',$scope.$scope.Foods)
                .success(function(answerFromServer){
                  console.log('sent was ok and got answer',answerFromServer);
                })
                .error(function(reason){
                  console.log('submit was not success',reason);
                })

            }
        }

        $scope.listOfFoods = [
            {"name":"Item1", "price":1, "desc":"some info", "option":[{name:"value1"}, {name:"value2"}, {name:"value3"}]},
            {"name":"Item2", "price":2, "desc":"some info 2", "option":[{name:"value2_1"}, {name:"value2_2"}, {name:"value2_3"}], multiple:true},
            {"name":"Item3", "price":3, "desc":"", "option":[]},
        ];

    });
</script>

<style type="text/css">
input.input-field {
    width: 100%;
    height: 100%;
}

.input-field,
.tel-number-field,
.textarea-field,
.select-field {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
}
.input-field:focus,
.tel-number-field:focus,
.textarea-field:focus,
.select-field:focus {
    border: 1px solid #0C0;
}

</style>

<div ng-app="MojtabaApp" ng-controller="MojtabaCtrl" class="container-fluid">
    <div ng-view></div>
    <form name="menu" ng-submit="submitForm(menu.$valid)" action="http://www.kabobhutcanada.com/modules/mojtaba_form/contact.php" novalidate method="$_POST">
        <table class="table table-hover">
            <tr>
                <td>
                    <label name="Foods.customer_name"><span>Name <span class="required">* </span></span></label>
                </td>
                <td>
                    <input type="text" class="input-field" name="Foods.customer_name" ng-model="Foods.customer_name" placeholder="Your name" required />
                    <p ng-show="Foods.customer_name.$invalid && !Foods.customer_name.$pristine" class="text-danger">Your name is required.</p>
                </td>
            </tr>
        </table>

        <table class="table table-hover">
            <tr data-ng-repeat="food in listOfFoods track by $index">
                <td>
                    {{$index + 1}}
                </td>
                <td>
                    <strong>{{food.name}}</strong><br>
                    <em>{{food.desc}}</em>
                </td>
                <td ng-if="food.multiple">
                    <div ng-repeat="obj in food.option">
                        <label>
                            {{obj.name}}
                            <input type="checkbox" ng-model="obj.selected" ng-change="checkChanged(food)" ng-disabled="food.totalSelected>=limit&&!obj.selected"/>
                        </label>
                    </div>
                </td>
                <td ng-if="!food.multiple">
                    <select data-ng-options="option as option.name for option in food.option" data-ng-model= "food.selected" ng-show="food.option.length" data-ng-init="food.selected = food.option[0]"></select>
                </td>
                <td>
                    {{food.price | currency}}
                </td>
                <td>
                    <a href="javascript:;" data-ng-click="addToChart(food)"><span class="glyphicon glyphicon-plus-sign"></span></a>
                </td>
            </tr>
        </table>

        <div class="col-md-6">
            <h3 class="text-center">Your Order!</h3>
            <table class="table table-hover">
                <tr ng-repeat="food in Foods">
                    <td>
                        {{$index + 1}}
                    </td>
                    <td ng-if="!food.multiple">
                        <strong>{{food.name}} <span ng-if="food.selected">({{food.selected.name}})</span></strong>
                    </td>
                    <td ng-if="food.multiple">
                        <strong>{{food.name}} <span ng-if="food.totalSelected">(<span ng-repeat="selectedOption in food.option | filter:{selected:true}">{{selectedOption.name+(!$last?', ':'')}}</span>)</span></strong>
                    </td>
                    <td>
                        {{food.price | currency}}
                    </td>
                    <td>
                        <a href="javascript:;" ng-click="removeFoods(food)" style="color:red"><span class="glyphicon glyphicon-minus-sign"></span></a>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <strong>Sub-Total</strong>
                    </td>
                    <td>
                        {{sum(Foods, 'price') | currency}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <strong>HST</strong>
                    </td>
                    <td>
                        {{(sum(Foods, 'price') * 13/100) | currency}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <strong>Total</strong>
                    </td>
                    <td>
                        {{(sum(Foods, 'price') * 113/100) | currency}}
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <h4 class="text-center" ng-show="sum(Foods, 'price') < 20" style="color:red"> You need to order more than $20.00 before tax!</h4>
                    </td>
                </tr>
            </table>
            <button type="submit" class="btn btn-primary" ng-disabled="menu.$invalid">Submit</button>
        </div>
    </form>

    <pre>
        {{Foods|json}}
        {{menu|json}}
    </pre>
</div>
{/source}