<section data-ng-controller="ConsumersController">
    <div class="page-header">
        <h1>New Order</h1>
    </div>

    <div class="row" ng-show="errors.has()">
        <div class="alert alert-danger" ng-repeat="err in errors.all">
            {{ err }}
        </div>
    </div>

    <div class="col-md-12" data-ng-init="initializeForm()">
        <form class="form-horizontal" data-ng-submit="create()" novalidate>
            <fieldset>
                <div class="form-group">
                    <label class="control-label" for="firstName">First Name</label>
                    <div class="controls">
                        <input type="text" data-ng-model="firstName" id="firstName" class="form-control" placeholder="First Name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="lastName">Last Name</label>
                    <div class="controls">
                        <input type="text" data-ng-model="lastName" id="lastName" class="form-control" placeholder="Last Name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="name">Address</label>
                    <div class="controls">
                        <div id="address_input"></div>
                        <div id="map_canvas">
                            <ui-gmap-google-map
                                center="mapConfig.center"
                                zoom="mapConfig.zoom">
                                <ui-gmap-search-box
                                    ng-model="address"
                                    parentdiv="mapSearchBoxConfig.parentDiv"
                                    events="mapSearchBoxConfig.events"
                                    template="mapSearchBoxConfig.template"
                                    options="mapSearchBoxConfig.options">
                                </ui-gmap-search-box>
                                <ui-gmap-marker 
                                    coords="mapMarker.coords" 
                                    options="mapMarker.options" 
                                    events="mapMarker.events" 
                                    idkey="mapMarker.id">
                            </ui-gmap-google-map>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="apartment">Apartment</label>
                    <div class="controls">
                        <input type="text" data-ng-model="apartment" id="apartment" class="form-control" placeholder="Apartment" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="phone">Cell Number</label>
                    <div class="controls">
                        <input type="text" data-ng-model="phone" id="phone" class="form-control" placeholder="Cell Number" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="radio-inline">
                        <input 
                            type="radio"
                            ng-model="product"
                            name="product-{{$index}}" 
                            value="large-pizza">
                        Large Pizza
                    </label>
                    <label class="radio-inline">
                        <input 
                            type="radio"
                            ng-model="product"
                            name="product-{{$index}}" 
                            value="medium-pizza">
                        Medium Pizza
                    </label>
                    <label class="radio-inline">
                        <input 
                            type="radio"
                            ng-model="product"
                            name="product-{{$index}}" 
                            value="small-pizza">
                        Small Pizza
                    </label>
                </div>

                <div class="form-group">
                    <input type="submit" class="btn btn-default" value="Done">
                </div>
            </fieldset>
        </form>
    </div>

    <script type="text/ng-template" id="places-autocomplete-template.tmpl.html">
        <input 
            type="text" 
            ng-model="ngModel" 
            id="address" 
            class="form-control" 
            placeholder="Address" 
            required>
    </script>
</section>