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

<div class="content-padding">

	<h1 class="title box-title"><i class="fa fa-slideshare"></i><span>Community</span></h1>

	<div class="bar-loader bar-loader-search bar-loader-boxes-top" ng-class="{'bar-loader-loading': loading}"></div>

	<div class="support-boxes" ng-show="!loading && communities.length > 1">

		<div class="support-box-wrap box-content2">

			<div class="support-box-wrap-header">
				<h1>Communities</h1>
				<div class="divider"></div>
			</div>

			<div class="no-box-content-color">
				<div class="field-container">
					<div class="field-row">
						<div class="field-key">Community</div>
						<div class="field-value">
							<select ng-model="id_community" ng-options="community.id_community as community.name_status for community in communities"></select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="support-boxes" ng-show="community">

		<div class="support-box-wrap box-content2">

			<div class="support-box-wrap-header">
				<h1>{{community.name}}</h1>
				<div class="divider"></div>
			</div>

			<div class="no-box-content-color">
				<div class="field-container">
					<div class="field-row">
						<div class="field-key">Status</div>
						<div class="field-value">
							<span class="tag tag-red" ng-show="!community.is_open">Closed</span>
							<span class="tag tag-green" ng-show="community.is_open">Open</span>
						</div>
					</div>
					<div class="field-row" ng-show="community.drivers.length">
						<div class="field-key">Drivers</div>
						<div class="field-value">
							<strong>{{community.drivers.length}}</strong>
						</div>
					</div>
					<div class="field-row" ng-show="community.restaurants.length">
						<div class="field-key">Restaurants</div>
						<div class="field-value">
							<strong>{{community.restaurants.length}}</strong>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<div class="support-box-wrap box-content2" ng-show="community.could_be_closed">

		<form name="formClose" novalidate>
			<div class="support-box-wrap-header">
				<h1>Close Community</h1>
				<div class="divider"></div>
			</div>

			<div class="no-box-content-color">

				<ul ng-class="{'submitted':submitted}" class="ul-inputs">
					<li class="li-input" ng-class="{'error':formClose.howLong.$invalid}">
						<div class="label">For how long do you want to close the community?</div>
						<div class="input">
							<select name="howLong" required ng-model="community.how_long">
								<option value="15">15 minutes</option>
								<option value="30">30 minutes</option>
								<option value="45">45 minutes</option>
								<option value="60">1 hour</option>
								<option value="120">2 hours</option>
							</select>
						</div>
						<div class="box-error">
							<small ng-show="formClose.howLong.$error.required">Required.</small>
						</div>
					</li>
					<li class="li-input" ng-class="{'error':formClose.reason.$invalid}">
						<div class="label">Reason why you want to close the community:</div>
						<div class="input">
							<input type="text" maxlength="50" required name="reason" ng-model="community.reason">
						</div>
						<div class="box-error">
							<small ng-show="formClose.reason.$error.required">Required.</small>
						</div>
					</li>
					<li ng-if="community.has_pre_orders">
						<strong class="label label-red">This community has {{community.has_pre_orders}} pending pre-orders, please take a look on that before close.</strong><br><br>
					</li>
					<li class="li-input" ng-show="!isSavingClose">
						<button class="button save" ng-click="close();">Close</button>
					</li>
					<li class="li-input" ng-show="isSavingClose">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>
				</ul>

			</div>
		</form>
	</div>

	<div class="support-box-wrap box-content2" ng-show="community.could_be_opened">

		<form name="formOpen" novalidate>
			<div class="support-box-wrap-header">
				<h1>Open Community</h1>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color" ng-show="!community.can_remove_force_close">
				<ul ng-class="{'submitted':submitted}" class="ul-inputs">
					<li class="li-input" ng-class="{'error':formOpen.hour.$invalid}">
						<div class="label">When do you want to drive until?</div>
						<div class="input">
							<input type="time" required min="{{community.now}}" name="hour" ng-model="community.hour">
						</div>
						<div class="box-error">
							<small ng-show="formOpen.hour.$error.required">Required.</small>
							<small ng-show="formOpen.hour.$error.min">It should be after {{community.now_formated}}.</small>
						</div>
					</li>
					<li class="li-input" ng-show="!isSavingOpen">
						<button class="button save" ng-click="open();">Open</button>
					</li>
					<li class="li-input" ng-show="isSavingOpen">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>
				</ul>
			</div>
			<div class="no-box-content-color" ng-show="community.can_remove_force_close">
				<ul ng-class="{'submitted':submitted}" class="ul-inputs">
					<li class="li-input" ng-class="{'error':formOpen.hour.$invalid}">
						<div class="label">This community is current closed. It will open at {{community.is_force_closed_by | convertimeformat:account.user.timezone:'MMMM Do YYYY, h:mm:ss a'}}</div>
					</li>
					<li class="li-input" ng-show="!isSavingOpen">
						<button class="button save" ng-click="openItNow();">Open it now</button>
					</li>
					<li class="li-input" ng-show="isSavingOpen">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>
				</ul>
			</div>
		</form>
	</div>

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

	<div class="support-box-wrap box-content2 box-content-table" ng-show="!loading && community.drivers.length">
		<div class="support-box-wrap-header">
			<h1><label for="show_drivers"><input name="show_drivers" id="show_drivers" type="checkbox" ng-model="community.show_drivers"/> Text drivers of this community</label></h1>
			<div class="divider"></div>
		</div>
		<div ng-show="community.show_drivers">
			<table class="tb-zebra">
				<tr>
					<th style="width:10px;"></th>
					<th>Driver</th>
					<th>Phone</th>
					<th>Working</th>
				</tr>
				<tr ng-repeat="driver in community.drivers">
					<td><input type="checkbox" ng-click="updateDriversCount()" id="{{driver.id_admin}}" ng-model="driver.text"/></td>
					<td>
						<label for="{{driver.id_admin}}">{{driver.name}}</label>
					</td>
					<td>{{driver.phone | formatPhone}}</td>
					<td>
						<span class="tag tag-red" ng-if="!driver.working">Not Working</span>
						<span class="tag tag-green" ng-if="driver.working">Working</span>
					</td>
				</tr>
			</table>
			<form name="formTextDrivers" id="formTextDrivers" novalidate>
				<div class="no-box-content-color">
					<ul ng-class="{'submitted':formTextDriversSubmitted}" class="ul-inputs">
						<li class="li-input" ng-class="{'error':formTextDrivers.textMessage.$invalid}">
							<div class="label">Message:</div>
							<div class="input">
								<input type="text" maxlength="50" required name="textMessage" ng-model="community.text_message">
							</div>
							<div class="box-error">
								<small ng-show="formTextDrivers.textMessage.$error.required">Required.</small>
							</div>
						</li>
						<li ng-show="!driversCount">
							<small>Select at least one driver.</small>
						</li>
						<li class="li-input" ng-show="!isSendingTextMessage && driversCount">
							<button class="button save" ng-click="sendTextMessage();">Text {{driversCount}} Driver<span ng-show="driversCount > 1">s</span>	</button>
						</li>
						<li class="li-input" ng-show="isSendingTextMessage">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>
					</ul>
				</div>
			</form>
		</div>
	</div>

		<div class="support-box-wrap box-content2 box-content-table" ng-if="!loading && community.restaurants.length">
			<h1><label for="show_restaurants"><input name="show_drivers" id="show_drivers" type="checkbox" ng-model="community.show_restaurants"/> Show restaurants of this community</label></h1>
			<div class="divider"></div>
		<table class="tb-zebra" ng-if="community.show_restaurants">
			<tr>
				<th>Restaurant</th>
				<th>Hours</th>
				<th>Status</th>
			</tr>
			<tr ng-repeat="restaurant in community.restaurants">
				<td>{{restaurant.name}}</td>
				<td>
					<span ng-bind-html="restaurant.closed_message"></span>
				</td>
				<td>
					<span class="tag tag-red" ng-if="!restaurant.is_open">Closed</span>
					<span class="tag tag-green" ng-if="restaurant.is_open">Open</span>
				</td>
			</tr>
		</table>
	</div>

</div>

