<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li class="active">{{vm.action}} Batch Message</li>
</ol>

<ng-include src="'views/modals/uploadImageCKEditorModal.html'"></ng-include>
<ng-include src="'views/modals/selectRouteBachMessageModal.html'"></ng-include>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.batch_message)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.batch_message.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Batch Message</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="send_to" class="col-sm-2 control-label">Send To <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">								
								<ui-select close-on-select="false" on-select="vm._addRemoveCustomer(vm._selected_send_to)" ng-model="vm._selected_send_to" style="width: 100%">
									<ui-select-match placeholder="Select or search a customer in the list...">{{$item.name}}</ui-select-match>
									<ui-select-choices repeat="customer in vm.customers | filter:$select.search">
										<span ng-bind-html="customer.name + ' (' + customer.status_formatted + ')' | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
								<p class="help-block">You must select at least one customer. You have selected <b>{{vm._send_to.length}}</b> customer(s)</p>
							</div>
						</div>
						<div class="form-group">
							<label for="buttons" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<a ng-click="vm._addAllCustomers()" class="btn btn-info" style="margin-right: 5px;">
									<i class="ti ti-plus"></i>
									All Customers
								</a>
								<a ng-click="vm._modalSelectRoute()" class="btn btn-success" style="margin-right: 5px;">
									<i class="ti ti-plus"></i>
									By Route
								</a>
								<div class="btn-group" style="margin-right: 5px;">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
										<i class="ti ti-plus"></i>
										By Status&nbsp;&nbsp;<span class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu">
										<li><a ng-click="vm._addByStatus('all')">All</a></li>
										<li><a ng-click="vm._addByStatus('active')">Active</a></li>
										<li><a ng-click="vm._addByStatus('archived')">Archived</a></li>
										<li><a ng-click="vm._addByStatus('lead')">Lead</a></li>
									</ul>
								</div>
								<a ng-click="vm._removeAllCustomers()" class="btn btn-danger">
									<i class="ti ti-minus"></i>
									All Customers
								</a>
							</div>
						</div>
						<div class="form-group" ng-if="vm._send_to.length > 0">
							<label for="_selected_send_to" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="search" placeholder="Search selected customers..." />
								<div style="max-height: 300px; overflow-y: scroll; margin-top: 15px;">
									<ul style="columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style: none; padding: 0px; margin: 0px;">
										<li ng-repeat="customer in vm._send_to | filter: search" ng-click="vm._addRemoveCustomer(customer)" style="padding: 3px 0px; cursor: pointer;" title="Click to remove from the list">
											<i class="ti ti-user"></i> {{customer.name}} <<i>{{customer.email}}</i>> ({{customer.status}})
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="subject" class="col-sm-2 control-label">Subject <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="subject" id="subject" ng-model="vm.batch_message.subject" ng-required="true" ng-minlength="3">
								<p class="help-block" ng-show="form.subject.$touched && form.subject.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.subject.$touched && form.subject.$error.minlength">Value is too short.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="description" class="col-sm-2 control-label">Description <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<textarea ck-editor-routely-directive name="description" id="description" ng-model="vm.batch_message.description"></textarea>
								<p class="help-block" ng-show="form.description.$touched && form.description.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="attachments" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<a class="btn btn-sm btn-info" title="New Attachment" ngf-multiple="false" ngf-select="vm._uploadFile($file)" ngf-max-size="10MB" ngf-pattern="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-accept="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-model-invalid="invalidFiles">+ New Attachment</a>
								<p ng-if="invalidFiles" style="color: #cc0000">Invalid File. Only Files (Images, .PDF, .DOC, .DOCX, .XLS, .XLSX) up to 10MB.</p>
							</div>
						</div>
						<div class="form-group" ng-if="vm._attachments.length">
							<label for="attachments" class="col-sm-2 control-label">Attachments</label>
							<div class="col-sm-8">
								<table class="table table-bordered">
									<tbody>
										<tr ng-repeat="attachment in vm._attachments">
											<td><a href="{{attachment.url}}" target="_blank">{{attachment.name}}</a></td>
											<td class="text-center"><a class="btn btn-sm btn-danger" ng-click="vm._removeFile(attachment.name)" title="Remove">Remove</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<button type="submit" ng-disabled="!form.$valid || vm._send_to.length == 0" class="btn-primary btn">Save</button>
								<a href="#/batch-messages" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
