<form name="form" class="payment-form restaurant-side-bar" ng-if="order.loaded && order.cart.hasItems() && order.showForm" novalidate>

	<div class="divider dots spacer-one-one"></div>

	<div ng-if="( restaurant._open || restaurant.force_pre_order ) && order.showForm && order.cart.hasItems()">

		<!-- user info -->
		<div class="delivery-info-container">
			<div ng-if="(restaurant.delivery == '1' && restaurant.takeout == '1')">
				<div class="toggle-wrapper clearfix">
					<button ng-click="order.toogleDelivery( 'delivery' )" ng-class="{'toggle-active': order.form.delivery_type=='delivery' }" class="payment-form-toggle">delivery</button>
					<button ng-click="order.toogleDelivery( 'takeout' )" ng-class="{'toggle-active': order.form.delivery_type=='takeout' }" class="payment-form-toggle">takeout</button>
				</div>
			</div>

			<div class="payment-form-group form-group">
				<i class="form-icon form-field"> </i>
				<div class="form-field">
					<div ng-if="(restaurant.delivery == '1' && restaurant.takeout != '1')">
						<label class="pay-title-label">Delivery Info</label>
					</div>

					<div ng-if="(restaurant.delivery != '1' && restaurant.takeout == '1')">
						<label class="pay-title-label">Takeout Info </label>
						<span class="take-out-only">Take out only!</span>
					</div>
				</div>
			</div>

			<div class="divider spacer-one-two"></div>


			<div class="personal-info field-container">
				<div class="payment-form-group form-group">
					<i class="fa fa-user payment-form-icon form-icon form-field"></i>
					<input focus="softKeyboard($event);" ng-blur="softKeyboardExit()" type="text" name="pay-name" tabindex="2" ng-model="order.form.name" class="payment-form-input form-input form-field" placeholder="name" autocomplete="name" x-autocompletetype="full-name">
				</div>

				<div class="payment-form-group form-group">
					<i class="fa fa-envelope-o payment-form-icon form-icon form-field"></i>
					<input ng-focus="softKeyboard($event);" ng-blur="softKeyboardExit()" type="email" name="pay-email" tabindex="3" ng-model="order.form.email" class="payment-form-input form-input form-field" placeholder="email" autocomplete="email" x-autocompletetype="email">
				</div>

				<div class="payment-form-group form-group">
					<i class="fa fa-phone payment-form-icon form-icon form-field"></i>
					<input ng-focus="softKeyboard($event);" ng-blur="softKeyboardExit()" type="tel" name="pay-phone" tabindex="4" ng-format-phone ng-model="order.form.phone" class="payment-form-input form-input form-field" placeholder="phone number" autocomplete="tel" x-autocompletetype="phone-full">
				</div>

				<div class="payment-form-group form-group">
					<i class="fa fa-map-marker payment-form-icon form-icon form-field"></i>
					<p class="pickup-info" ng-if="order.form.delivery_type!='delivery'">Pickup from:<br><span ng-bind-html-unsafe="restaurant.address | nl2br"></span></p>
					<textarea ng-focus="softKeyboard($event);" ng-blur="softKeyboardExit()" ng-autosize ng-if="order.form.delivery_type=='delivery'" class="payment-form-input form-input form-field" ng-model="order.form.address" name="pay-address" id="pay-address" tabindex="5" placeholder="address" autocomplete="street-sddress" x-autocompletetype="street-address"></textarea>
				</div>

				<div class="payment-form-group form-group">

					<i class="fa fa-bullhorn payment-form-icon form-icon form-field"></i>
					<textarea ng-focus="softKeyboard($event);" ng-blur="checkGiftCard();softKeyboardExit()" ng-autosize name="notes" ng-blur="" ng-model="order.form.notes" tabindex="6" class="payment-form-input form-input form-field" placeholder="notes / code"></textarea>

					<ng-include src="'/assets/view/restaurant-gift-card.html'"></ng-include>
			</div>
		</div>

		<!-- payment info -->
		<div class="payment-info-container">

			<div class="divider spacer-two-two"></div>
			<div class="divider spacer-one-one"></div>

			<div class="payment-info field-container">
				<div class="toggle-wrapper clearfix">

					<button ng-click="order.tooglePayment( 'card' )" ng-if="(restaurant.credit == '1')" ng-class="{'toggle-active': order.form.pay_type=='card' }" class="payment-form-toggle">card</button>
					<button ng-click="order.tooglePayment( 'cash' )" ng-if="(restaurant.cash == '1')" ng-class="{'toggle-active': order.form.pay_type=='cash' }" class="payment-form-toggle">
						<span ng-if="(restaurant.cash == '1' && ( restaurant.credit == '1' || restaurant.campus_cash ) )">Cash</span>
						<span ng-if="(restaurant.cash == '1' && restaurant.credit == '0' && !restaurant.campus_cash )">Only Cash Accepted</span>
					</button>

					<button ng-click="order.tooglePayment( 'applepay' )" ng-if="(restaurant.credit == '1') && applePay"  ng-class="{'toggle-active': order.form.pay_type=='applepay' }" class="payment-form-toggle">apple pay</button>

					<button ng-click="order.tooglePayment( 'campus_cash' )" ng-if="restaurant.campus_cash"  ng-class="{'toggle-active': order.form.pay_type=='campus_cash' }" class="payment-form-toggle">{{restaurant.campus_cash_name}}</button>

				</div>

				<div class="divider spacer-two-two"></div>

				<div ng-if="config.driver_change_amount && order.form.pay_type == 'cash'">
					<p class="delivery-free restaurant-delivery-free">
						<i>Drivers only carry ${{config.driver_change_amount}} in change.</i><br><br>
					</p>
				</div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='applepay'">
					<p class="delivery-free restaurant-delivery-free" ng-click="">
						<i>After pressing <b>Place Order</b>,<br>select your card from Apple Pay,<br>then pay using your Touch ID.</i><br><br>
					</p>
				</div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='campus_cash' && order.form.campus_cash_delivery_on_campus_confirmation">
					<input custom-checkbox type="checkbox" ng-model="order.form.address_campus">
					<span class="form-field form-field-checkbox-label" ng-click="order.form.address_campus = !order.form.address_campus;">
					I certify that the address listed above for delivery is located on campus.</span>
					<div class="divider"></div>
				</div>

				<div class="divider spacer-two-two" ng-if="order.form.pay_type=='campus_cash'"></div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='campus_cash'">
					<i class="fa fa-credit-card payment-form-icon form-icon form-field"></i>
					<input ng-class="{'form-input-invalid':!form.campusCash.$valid}" ng-focus="softKeyboard($event);" type="text" name="campusCash" mask="{{restaurant.campus_cash_mask}}" tabindex="6" ng-model="order.form.campusCash" class="payment-form-input form-input form-field" id="campusCash">
				</div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='card'">
					<i class="fa fa-credit-card payment-form-icon form-icon form-field"></i>
					<input ng-focus="softKeyboard($event);" type="tel" name="pay-card-number" tabindex="6" ng-change="order.creditCardChanged();" ng-model="order.form.cardNumber" class="payment-form-input form-input form-field" id="cardNumber" autocomplete="cc-number" x-autocompletetype="cc-number">
				</div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='card'">
					<i class="fa payment-form-icon form-icon form-field"></i>
					<div class="form-input-select"><select ng-change="order.cardInfoChanged()" ng-model="order.form.cardMonth" ng-options="month.value as month.label for month in order._months" tabindex="7" class="payment-form-select payment-form-input form-input form-field" id="cardExpirationMonth" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">{{order.form.card.month}}</select></div>
					<div class="form-input-select"><select ng-change="order.cardInfoChanged()" ng-model="order.form.cardYear" ng-options="year.value as year.label for year in order._years" tabindex="8" class="payment-form-select payment-form-input form-input form-field payment-form-select-year" id="cardExpirationYear" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year"></select></div>
				</div>

				<div class="payment-form-group form-group" ng-if="order.form.pay_type=='card' || order.form.pay_type=='campus_cash'">
					<i class="fa fa-thumbs-up payment-form-icon form-icon form-field"></i>
					<input type="hidden" name="pay-autotip-value" ng-model="order.form.autotip" value="0">
					<div class="form-input-select"><select ng-model="order.form.tip" ng-options="tip.value as tip.label for tip in order._tips" ng-change="order.tipChanged();" class="tip payment-form-select payment-form-input form-input form-field" tabindex="9"></select></div>
				</div>

				<div ng-if="order.form.pay_type == 'campus_cash'">
					<p class="delivery-free restaurant-delivery-free">
						<i>You will be required to present your student ID to the delivery driver for verification.</i><br><br>
					</p>
				</div>

				<ng-include src="'/assets/view/restaurant-form-delivery-time.html'"></ng-include>

			</div>

			<div class="divider spacer-two-two"></div>

			<div class="payment-form-group form-group hide-mobile">
				<ng-include src="'/assets/view/restaurant-place-order-button.html'"></ng-include>
			</div>

		</div>

		</div>
	</div>

</form>