
<div class="content-padding" ng-hide="isModal">
	<h1 class="title"><i class="fa fa-comments-o"></i> Make a call / Send SMS</h1>
</div>

<div ng-class="{'col-box': !isModal}"class="content-padding" ng-controller="SupportPhoneCtrl">

	<div ng-class="{'two-col': !isModal}" ng-hide="hideCallBox">

		<div class="ul-inputs" ng-class="{'box-content2': !isModal}">

			<form name="formCall" novalidate>

				<ul ng-class="{'submitted':formCallSubmitted}" class="ul-inputs">

					<li class="li-input" ng-show="!isModal">
						<strong>Make a call</strong>
					</li>

					<li class="li-input" ng-if="!isModal">
						<div class="label">Choose an admin/driver:</div>
						<div class="input">
							<ui-select ng-model="call.staff" theme="select2" ng-disabled="disabled" style="width: 90%;" title="Choose an admin/driver:">
								<ui-select-match placeholder="Choose an admin/driver:">{{$select.selected.name}}</ui-select-match>
								<ui-select-choices repeat="opt in staff | propsFilter: {name: $select.search}">
									{{opt.name}}: {{opt.phone}}
								</ui-select-choices>
							</ui-select>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':formCall.phone.$invalid}" ng-show="!isModal">
						<div class="label">Phone:</div>
						<div class="input"><input type="text" name="phone" required  placeholder="Phone" ng-model="call.phone"></div>
						<div class="box-error">
							<small ng-show="formCall.phone.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':formCall.to.$invalid}" ng-show="!isModal">
						<div class="label">Are you calling to:</div>
						<div class="input">
							<select name="to" ng-model="call.to" required ng-options="opt.to as opt.label for opt in call._to"></select>
						</div>
						<div class="box-error">
							<small ng-show="formCall.to.$error.required">Required.</small>
						</div>
					</li>

					<div ng-show="!isModal"><br></div>


					<div class="double-cols" ng-show="!formCallSending">
						<button class="button button-empty button-border button-green ng-scope button-full" ng-click="call.make()"><i class="fa fa-mobile"></i>&nbsp;&nbsp;Cell</button>
						<button class="button button-empty button-border button-green ng-scope button-full" ng-click="call.voip()"><i class="fa fa-phone"></i>&nbsp;&nbsp;VOIP</button>
					</div>
					<div class="divider"></div>

					<li class="li-input" ng-show="formCallSending">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>

				</ul>

			</form>

		</div>
	</div>

	<div ng-class="{'two-col': !isModal}" ng-hide="hideSMSBox">

		<div class="ul-inputs" ng-class="{'box-content2': !isModal}">

			<form name="formSMS" novalidate>

				<ul ng-class="{'submitted':formSMSSubmitted}" class="ul-inputs">

					<li class="li-input" ng-show="!isModal">
						<strong>Send SMS</strong>
					</li>

					<li class="li-input" ng-if="!isModal">
						<div class="label">Choose an admin/driver:</div>
						<div class="input">
							<ui-select multiple ng-model="sms.staffList" theme="select2" ng-disabled="disabled" style="width: 90%;" title="Choose an admin/driver:">
								<ui-select-match placeholder="Choose an admin/driver:">{{$item.name}} &lt;{{$item.phone}}&gt;</ui-select-match>
								<ui-select-choices repeat="opt in staff | propsFilter: {name: $select.search}">
									{{opt.name}} &lt;{{opt.phone}}&gt;
								</ui-select-choices>
							</ui-select>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':formSMS.phone.$invalid}" ng-show="!isModal">
						<div class="label">Phone:</div>
						<div class="input"><input type="text" name="phone" ng-required="!isModal"  placeholder="Phone" ng-model="sms.phones"></div>
						<div class="box-error">
							<small ng-show="formSMS.phone.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':formSMS.message.$invalid}">
						<div class="label" ng-show="!isModal">Message:</div>
						<div class="input"><textarea name="message" required placeholder="Message" ng-enter="sms.send();" ng-model="sms.message"></textarea></div>
						<div class="box-error">
							<small ng-show="formSMS.message.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':formSMS.message.$invalid}" ng-if="!isModal">
						<div class="label">Open ticket page?</div>
						<div class="input">
							<select name="openTicket" ng-model="sms.open_ticket" ng-options="opt.value as opt.label for opt in yesNo" ></select>
						</div>
						<div class="box-error">
							<small ng-show="formSMS.message.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-show="!formSMSSending">
						<button class="button button-empty button-border button-green button-full" ng-click="sms.send();"><i class="fa fa-comment"></i> Send Text</button>
					</li>
					<li class="li-input" ng-show="formSMSSending">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>

				</ul>

			</form>

		</div>
	</div>

</div>
