<div class="top-pad"></div>

<div class="content-padding">

	<div class="support-boxes">

		<div class="support-box-wrap box-content2" style="-webkit-column-width: 20%;">
			<br>
			<div class="no-box-content-color customer-content-box">
				<div class="customer-image-crop customer-image-crop-large">
					<img ng-if="customer.image" class="customer-image-large" src="{{customer.image}}"></img>
					<div ng-if="!customer.image" class="customer-image-large customer-image-null"></div>
				</div>
				<h1 class="customer-name-large">{{customer.name}}</h1>
				<br>

				<div class="field-container">

					<div class="field-row">
						<div class="field-key"></div>
						<div class="field-value">
							<a href="/customer/edit/{{customer.id_user}}"><button class="button button-small button-empty button-green"><i class="fa fa-pencil"></i>&nbsp;&nbsp;Edit</button></a>
						</div>
					</div>
					<div class="field-row">
						<div class="field-key">Phone</div>
						<div class="field-value"><a href ng-click="callText(customer.phone)">{{customer.phone | formatPhone}}</a></div>
					</div>

					<div class="field-row">
						<div class="field-key">Address</div>
						<div class="field-value"><a href ng-click="routeAddress(customer.address)"><span ng-bind-html-unsafe="customer.address | nl2br"></span></a></div>
					</div>
					<div class="field-row">
						<div class="field-key">
							Block Customer
						</div>
						<div class="field-value">
							<label class="switch-wrap">
								<input type="checkbox" class="switch" ng-change="blockUser( customer.id_user );" ng-model="customer.blocked"/><div></div>
							</label>
						</div>
					</div>
					<div class="field-row">
						<div class="field-key">
							Block Phone
						</div>
						<div class="field-value">
							<label class="switch-wrap">
								<input type="checkbox" class="switch" ng-change="blockPhone( customer.id_phone );" ng-model="customer.phone_blocked"/><div></div>
							</label>
						</div>
					</div>
				</div>
				<br><br>
				<div class="double-cols">

					<button ng-click="creditDialog( customer.id_user );" ng-if="customer.id_user && !account.user.isCommunityDirector" class="button button-empty button-border button-orange"><i class="fa fa-gift"></i>&nbsp;&nbsp;Gift Card</button>

					<button ng-click="" class="button button-empty button-border button-blue" ng-class="{'button-disabled': true}"><i class="fa fa-close"></i>&nbsp;&nbsp;Deactive</button>
				</div>
			</div>
		</div>

		<div class="support-widget-box-wrap">
			<a href="/orders?user={{customer.id_user}}" class="column-50 support-box-widget support-box-widget-green">
				<i class="fa fa-user support-box-widget-icon"></i>
				<div class="support-box-widget-label">Orders from this customer</div>
				<div class="support-box-widget-content">{{customer.orders_from_this_customer}}</div>
			</a>

			<a href="/orders?phone={{customer.phone}}" class="column-50 support-box-widget support-box-widget-blue">
				<i class="fa fa-phone support-box-widget-icon"></i>
				<div class="support-box-widget-label">Orders from this number</div>
				<div class="support-box-widget-content">{{customer.orders_from_this_phone}}</div>
			</a>

		</div>

		<div class="divider"></div>

		<br>

		<div class="support-box-wrap box-content2" style="-webkit-column-width: 80%;">
			<div class="support-box-wrap-header">
				<h1>Credits</h1>
				<div class="support-box-header-actions-wrap">
					<div class="support-box-header-actions">
						<a href="" ng-click="creditDialog( customer.id_user );"><button class="button button-small button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Gift Card</button></a>
					</div>
				</div>
				<div class="divider"></div>
			</div>

			<div class="no-box-content-color">
				<div class="field-container">
					<div class="field-row">
						<div class="field-key">Total Credit</div>
						<div class="field-value" positive-or-negative-color="{{credits.credit}}">${{credits.credit}}</div>
					</div>
					<div class="field-row">
						<div class="field-key">Total Debits</div>
						<div class="field-value" positive-or-negative-color="{{credits.debit}}">${{credits.debit}}</div>
					</div>
					<div class="field-row">
						<div class="field-key">Credit Left</div>
						<div class="field-value" positive-or-negative-color="{{credits.credit_left}}">${{credits.credit_left}}</div>
					</div>
					<div class="field-row" ng-if="credits.credit">
						<div class="field-key"></div>
						<div class="field-value">
							<a href="/customer/credit/{{customer.id_user}}">View credits log</a>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<br><br>

	<ui-tabs ng-if="!loading">
		<ui-tab title="Orders" icon="car" default="true" id="orders" path="/assets/view/listview-orders.html" method="loadOrders"></ui-tab>
	</ui-tabs>

</div>
