

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-info">
			<div class="panel-heading ">
				<h4 class="panel-title p-heading">Create/Edit Audience Segments</h4>
			</div>
			<div class="panel-body">
				<form class="form-inline">
					<div class="form-group m-r-10">
						<input type="text" maxlength="40" placeholder="Enter segment name" ng-model="audienceSegment.name"
							class="form-control" ng-blur="validateSegmentName()" />
					</div>

					<div class="form-group m-r-10">
						<textarea rows="1" cols="50" maxlength="70" placeholder="Enter segment description" class="form-control"
							ng-model="audienceSegment.description"></textarea>
					</div>
					<div class="form-group m-r-10">
						<button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="saveAudienceSegment()"
							ng-show="!editMode">Save</button>
						<button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="updateAudienceSegment()"
							ng-show="editMode">Update</button>
						<a class="btn btn-sm btn-primary m-r-5" ng-if="!cancelBtn" type="button"
							href="#/aud/view">Cancel</a>
						<a class="btn btn-sm btn-primary m-r-5" ng-if="cancelBtn" ng-click="cancelAud()"
							type="button">Cancel</a>
						<strong>
							<label style="color:red" ng-model="errorMessage"
								ng-show="isError">{{errorMessage}}</label></strong>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-2">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h4 class="panel-title p-heading">Choose Target</h4>
			</div>
			<div class="panel-body">
				<div ng-repeat="aud in audience" style="text-align:center;">
					<p>
						<a class="btn btn-primary btn-lg" style="font-size:16px;width:120px;"
							ng-click="selectContext(aud.Context)"
							ng-class="{'active':aud.Context==context}" ng-if="showAud[$index]">{{aud.Context}}</a>
					</p>
					<label style="text-align:center;padding-left:30%;padding-right:30%" ng-if="showAudLabel[$index]">{{aud.Label}}</label>
				</div>


			</div>
		</div>
	</div>
	<div class="col-md-2">
		<div class="panel panel-primary" style="height:365px;">
			<div class="panel-heading">
				<h4 class="panel-title p-heading">Get Granular</h4>
			</div>
			<div class="panel-body">
				<div ng-repeat="aud in audience | filter: {Context:context}" style="text-align:center;">
					<p ng-repeat="cat in aud.Category">
						<a class="btn btn-primary btn-lg index_{{$index}}" style="font-size:13px;width:120px"
						  ng-click="selectCategory(cat);" ng-class="{'active': cat == category}" ng-if="showOption[$index]">
						  {{cat}}
						</a>
					  </p>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-7">
		<div class="panel panel-warning" style="height:365px;overflow:auto">
			<div class="panel-heading">
				<h4 class="panel-title p-heading">Complete Criteria</h4>
				{{ item }}
				<!--  a button for Audience Segment  , Willl be visible only if  isAudienceExport would be true-->
				<button ng-if="isAudienceExportEnabled" title="Download csv"  ng-click="downloadAudienceCsv()" class="btn btn-sm btn-primary m-r-1" type="button" style="float: right; margin-top: -24px;"><i  class="fa fa-2x fa-download" ></i></button>
				<button  ng-disabled="!isButtonEnabled()"  class="btn btn-sm btn-primary m-r-5" type="button" style="float: right; margin-top: -24px;"
					ng-click="fetchAudienceReach()">Get Reach Count</button>
			</div>
			<div class="panel-body" style="padding: 5px; margin: 10px 0px 0px 0px;">
				<form class="form-inline">
					<div ng-repeat="cat in categories |filter :{category:category}">
						<fieldset ng-repeat="item in audienceSegment[context][category]"
							style="padding-left:10px;padding-bottom:10px;">
							<!-- code for custom segment -->
							<div style="width: 100%; height:auto; text-align: left; margin-bottom: 10px;"
								ng-show="category == 'Custom Segment'">
								<div class="form-group">
									<select class="form-control m-r-5" style="width: 130px;" id="fileheader">
										<option value="0" selected> File Header </option>
										<option value="true"> Yes </option>
										<option value="false"> No </option>
									</select>
								</div>
								<div class="form-group">
									<select class="form-control m-r-5" style="width: 130px;" id="datatype">
										<option value="0" selected>Type of data</option>
										<option value="clientid">Customer ID</option>
										<option value="did">Device ID</option>
										<option ng-show="!hide_cSegPhoneEmail" id="email_op" value="email">Email</option>
										<option ng-show="!hide_cSegPhoneEmail" id="phone_op" value="phone">Phone</option>
									</select>
								</div>
								<style>
									.tooltip .tooltiptext {
										visibility: hidden;
										width: 120px;
										background-color: #555;
										color: #fff;
										text-align: center;
										border-radius: 6px;
										padding: 5px 0;
										position: absolute;
										z-index: 1;
										bottom: 125%;
										left: 50%;
										margin-left: -60px;
										opacity: 0;
										transition: opacity 0.3s;
									}

									.tooltip .tooltiptext::after {
										content: "";
										position: absolute;
										top: 100%;
										left: 50%;
										margin-left: -5px;
										border-width: 5px;
										border-style: solid;
										border-color: #555 transparent transparent transparent;
									}

									.tooltip:hover .tooltiptext {
										visibility: visible;
										opacity: 1;
									}
								</style>
								<div class="form-group">
									<label>Upload File <span style="font-size: 8px; color:red;">*</span></label>
									<input type="file" accept=".csv" id="customFile" class="form-control m-r-5"
										class="uploadCustomFile" ng-model="item.customseg" ng-click="fileUpload(item.customseg)" style="width: 130px;">
								</div>
								<div style="float: right;margin-right:8px;">
									<a href="/assets/sample/clientID.csv" style="padding-right: 5px; padding-top: 10px;"
										data-toggle="tooltip" title="Format sample for uploading file">Sample csv
										<!-- <span class="tooltiptext">Format sample for uploading file</span> -->
									</a>
								</div><br /><br />

								<div id="custom_message"></div>
							</div>
							<!-- code for custom segment -->
							<!-- live event ui changes drop down -->
							<div style="width: 100%; height:auto; text-align: left; margin-bottom: 10px;">

								<div class="form-group  m-r-10" ng-show ="journeyKey == true">
									<select id="journeydd" data-index="{{$index}}" class="form-control input-sm"  
										 style="width: 135px" 
										 ng-model="selectedJourney"
										 ng-change="onJourneySelect($index, selectedJourney)"  
										 ng-options="journey for journey in journeysArray">
										<option disabled selected value="">Select a journey</option>
							    	</select>
								</div>

								<div class="form-group" ng-show="category == 'Events' && category !== 'Communique'">
									<select class="form-control m-r-5" ng-model="item.since.have" style="width: 130px;">
										<option value="0" selected> Select </option>
										<option value="h"> Have Done </option>
										<option value="hn"> Have Not Done </option>
									</select>
								</div>
								<!-- End of live event  drop down ui section -->

								<div class="form-group m-r-10" ng-show="category != 'Communique' && category !='Events'">
									<select class="category form-control" style=" width: 149px;"
										ng-model="item.selectedAttribute"
										ng-options="attr as attr.text for attr in cat.attributes"
										ng-change="item.value=undefined;item.operator=undefined;getEventAttributes(item.selectedAttribute,'{{category}}',$index);operandChange('{{item.selectedAttribute.label}}');validateProperty($index);"
										 >
										<option value="" ng-show="false" selected disabled> {{category}}</option>
									</select>
								</div>
								<div class="form-group  m-r-10" ng-show="category == 'Events'">
									<select class="events-select_{{$index}} form-control input-sm"  
										ng-show="category == 'Events'" style="width: 135px"  
										ng-model="item.searchDropdown" 
										ng-change="getEventAttributes(item.searchDropdown,'{{category}}','{{$index}}');operandChange('{{item.selectedAttribute.label}}');validateProperty($index);" >
							    	</select>
								</div>

							</div>
							<span style="display: none;"> {{ item.subselectedAttribute }} </span>
							<span style="display: none;"> {{ item.selectedAttribute }} </span>
							<div ng-show="category == 'Communique'">
								<div>
									<label for="" ng-show="category == 'Communique'"><h4>Publisher</h4></label>
									<div class="form-group" ng-show="category == 'Communique'" style="display: inline-block; margin-left: 8px;"> 
										<select class="category form-control" style=" width: 149px;"
										   ng-model="item.selectedpubattr"
										   ng-options="attr as attr.text for attr in cat.pubsubattr"
										   ng-change="item.value=undefined;item.operator=undefined;getEventAttributes(item.selectedpubattr,'{{category}}');operandChange('{{item.selectedpubattr.label}}');validateProperty($index);"
										    >
										   <option value="" ng-show="false" selected disabled> {{category}}</option>
									   </select>
									</div> 
									<div class="form-group m-r-10" ng-if="item.selectedpubattr.elist.length > 0" style="display: inline-block;">
										<select class="subcategory form-control" style=" margin-left: 0px; width: 149px;"
											ng-model="item.subselectedpubattr"
											ng-options="eseg as eseg.name for eseg in item.selectedpubattr.elist"
											 >
											<option value="" ng-show="false" selected disabled>{{item.subselectedpubattr.name}}</option>
										</select>
									</div>
								</div>
			
								<div style="margin-top: 50px;">
									<label for="" ng-show="category == 'Communique'"><h4>Subscriber</h4></label>
									<div class="form-group" ng-show="category == 'Communique'" style="display: inline-block; margin-left: 8px;"> 
										<select class="category form-control" style=" width: 149px;"
										   ng-model="item.selectedsubattr"
										   ng-options="attr as attr.text for attr in cat.pubsubattr"
										   ng-change="item.value=undefined;item.operator=undefined;getEventAttributes(item.selectedsubattr,'{{category}}');operandChange('{{item.selectedsubattr.label}}');validateProperty($index);"
										    >
										   <option value="" ng-show="false" selected disabled> {{category}}</option>
									   </select>
									</div> 
									<div class="form-group m-r-10" ng-if="item.selectedsubattr.elist.length > 0" style="display: inline-block;">
										<select class="subcategory form-control" style=" margin-left: 0px; width: 149px;"
											ng-model="item.subselectedsubattr"
											ng-options="eseg as eseg.name for eseg in item.selectedsubattr.elist"
											 >
											<option value="" ng-show="false" selected disabled>{{item.subselectedsubattr.name}}</option>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group m-r-10" ng-if="item.selectedAttribute.elist.length > 0">
								<select class="subcategory form-control" style=" margin-left: 0px; width: 149px;"
									ng-model="item.subselectedAttribute"
									ng-options="eseg as eseg.name for eseg in item.selectedAttribute.elist"
									  ng-change="getSegementValueBox(item.selectedAttribute, item);">
									<option value="" ng-show="false" selected disabled>Attributes</option>
								</select>
							</div>

							<div class="form-group m-r-10" ng-if=" 1 > item.selectedAttribute.elist.length"
								ng-show="category != 'Custom Segment'">
								<span ng-init="item.selectedAttribute.elist = [{'name':'status','type':'bool'}]"></span>
								<select class="subcategory form-control" style=" margin-left: 0px; width: 149px;"
									ng-model="item.subselectedAttribute"
									ng-options="eseg as eseg.name for eseg in item.selectedAttribute.elist"
									ng-change="getSegementValueBox(item.selectedAttribute, item);">
									<option value="" ng-show="false" selected disabled>Attributes</option>
								</select>
							</div>

							<div class="form-group m-r-10" ng-show="category != 'Custom Segment' && category != 'Communique'">
								<select class="form-control" style="width:135px;" ng-model="item.operator"
									ng-options="op.label as op.text for op in item.selectedAttribute.operators"
									ng-if="item.subselectedAttribute.type != 'number' && item.subselectedAttribute.type != 'boolean'">
									<option value="" ng-show="false" selected disabled> Operator</option>
								</select>

								<select class="form-control" style="width:135px;" ng-model="item.operator"
									ng-if="item.subselectedAttribute.type == 'number'">
									<option value="gt"> Greater Than</option>
									<option value="lt"> Less Than</option>
									<option value="eq"> Equals </option>
									<option value="ne"> Not Equals</option>
								</select>

								<select class="form-control" style="width:135px;" ng-model="item.operator"
									ng-if="item.subselectedAttribute.type == 'boolean'">
									<option value="eq"> Equals </option>
									<option value="ne"> Not Equals</option>
								</select>

							</div>
							<div class="form-group m-r-10" ng-show="category != 'Communique'">
								<select class="form-control" style="width:100px;" ng-if="item.subselectedAttribute.type== 'boolean'" ng-model="item.value"  ng-options="lblVal.label as lblVal.text for lblVal in item.selectedAttribute.list">
									<option value="" selected disabled ng-show="false">Value</option>

								</select>
								<input type="text" class="form-control" style="width:100px;" ng-show="item.selectedAttribute.multiple==undefined && item.selectedAttribute.type!='time' && item.subselectedAttribute.type!='boolean'" ng-model="item.value"  ng-model-options="{updateOn: 'blur'}" placeholder="Enter Value" />
								<input type="text" class="form-control" style="width:100px;" ng-show="item.selectedAttribute.multiple==undefined && item.selectedAttribute.type!='time' && item.subselectedAttribute.type!='boolean' && item.operator == 'isb' || item.operator == 'isnb' " ng-model="item.valueSecond"  ng-model-options="{updateOn: 'blur'}" placeholder="Enter Value " />
								<select class="padding form-control" ng-model="item.timeUnit" ng-options="op.label as op.text for op in timeunit"  ng-show=" item.selectedAttribute.label == 'ls' || item.selectedAttribute.label == 'fs'" style="width:135px;">
									<option value="" ng-show="false" selected disabled>Time unit</option>
								</select>
								<select class="form-control" style="width:135px;"
									ng-show="item.selectedAttribute.multiple==false" ng-model="item.value"
									ng-options="lblVal.label as lblVal.text for lblVal in item.selectedAttribute.list">
								</select>
								<select class="form-control" style="width:135px;"
								ng-show="item.selectedAttribute.multiple == 'false'"
								ng-model="item.value">
							<option value="true">True</option>
							<option value="false">False</option>
							<option ng-repeat="lblVal in item.selectedAttribute.list" value="{{lblVal.label}}">
								{{lblVal.text}}
							</option>
						</select>
						
	                            <select id="ddlEventList_{{$index}}" ng-init="isMultiEdit ? getEventAttributes(item.selectedAttribute,category, $index) : ''" multiple="multiple" style="width:200px;height:35px;"  ng-model="item.value" ng-multiple="true" ng-if="item.selectedAttribute.multiple==true && item.selectedAttribute.text != 'Geo-fencing'">

								</select>
								<!-- <select class="form-control" style="height:60px;" multiple="" ng-multiple="true"
									ng-model="item.value"
									ng-show="item.selectedAttribute.multiple==true && (item.selectedAttribute.type!='timelist' && item.selectedAttribute.type!='object') && item.selectedAttribute.text != 'Geo-fencing'"
									ng-options="opt for opt in item.selectedAttribute.list">
									<option value="" selected disabled ng-show="false"> Values</option>

								</select> -->

								<select class="form-control" style="width:100px;height:60px;" multiple=""
									ng-multiple="true" ng-model="item.value"
									ng-show="item.selectedAttribute.multiple==true && item.selectedAttribute.type=='object'"
									ng-options="opt.id as opt.name for opt in item.selectedAttribute.list">
									<option value="" selected disabled ng-show="false"> Values</option>

								</select>

								</select>
								<select class="form-control" style="width:100px;" ng-model="item.value"
									ng-change="openGeoFence(this,item.value,$index)"
									ng-show="item.selectedAttribute.text == 'Geo-fencing'">
									<option value="new" selected>Create New </option>
									<option value="{{ g.name }}" ng-repeat="g in geoArr">{{ g.name }} </option>
								</select>
								<span ng-if="item.selectedAttribute.text == 'Geo-fencing'"> For </span>
								<input type="number" class="form-control" style="width:100px;" ng-model="item.dwell"
									ng-show="item.selectedAttribute.text == 'Geo-fencing'">

								<select class="form-control" style="width:100px;" ng-model="item.time"
									ng-show="item.selectedAttribute.text == 'Geo-fencing'">
									<option value="m" selected>Min </option>
									<option value="h" selected>Hours </option>
									<option value="d" selected>Days </option>
								</select>

								<select class="form-control" style="width:100px;height:60px;" multiple=""
									ng-multiple="true" ng-model="item.value"
									ng-show="item.selectedAttribute.multiple==true && item.selectedAttribute.type=='timelist'"
									ng-options="opt.label as opt.text for opt in item.selectedAttribute.list">
									<option value="" selected disabled ng-show="false"> Values</option>

								</select>

								<div ng-show="item.selectedAttribute.label=='custom'">
									<select stye="width:58px" ng-model="item.ft" class="form-control"
										ng-options="n for n in [] | range:0:23" ng-change="item.value=item.ft;">
									</select>-
									<select stye="width:58px" ng-model="item.tt" class="form-control"
										ng-options="n for n in [] | range:(item.ft)+1:24"
										ng-change="item.value=item.ft;">
									</select>
								</div>
							</div>
							<br /><br />
							<div style="width: 100%; height:auto; text-align: left; margin-bottom: 10px;">
								<!-- live event ui changes -->
								<div ng-show="category == 'Events'">
									<!-- <div class="form-group">
										<select  class="form-control" ng-model="item.since.have" >
											<option value="0" > Select </option>
											<option value="h"> Have Done</option>
											<option value="hn"> Have Not Done </option>
										</select>
								</div>
								<br/><br/> -->
									<div ng-show="item.since.have == 'hn'">
										<div ng-if="!item.since.time || !item.since.type || !item.sinceEvent" style="color: red; font-size: 12px; margin-top: 5px;">Please select the 'Since' parameter  before fetching the reach count.</div> 
										<div class="form-group"> Since
											<input type="number" ng-model="item.since.time" class="form-control"
												style="width:100px;" value="0" />

										</div>
										<div class="form-group">
											<select class="form-control" ng-model="item.since.type">
												<option value="s"> Seconds</option>
												<option value="m"> Minutes </option>
												<option value="h"> Hours </option>
												<option value="d"> Days </option>
											</select>
										</div>
										<div class="form-group "> Of
											<select class="events-select_since_{{$index}} category form-control" ng-model="item.sinceEvent"
											    style="width: 150px;" ng-change="getSinceEvent(item.sinceEvent,'{{category}}','{{$index}}');" >
											</select>
										</div>
									</div>
								</div>
								<!-- End of live event ui section -->
								<!-- End of live event ui section -->
								<!-- voucher expire UI start -->
								<div style="width: 100%; height:auto; text-align: left; margin-bottom: 10px;"
									ng-if="item.subselectedAttribute.name == 'ExpiryDate'">
									<div class="form-group">
										<select class="form-control m-r-5" style="width: 80px;">

											<option value="h"> Is </option>
											<option value="hn"> Was </option>
										</select>
									</div>
									<div class="form-group">
										<div class="form-group m-r-5">
											<select class="category form-control" style=" width: 80px;">
												<option value="lt"> Less Than </option>
												<option value="gt"> Greater Than </option>
												<option value="equals"> Equals </option>
												<option value="NotEquals"> Not Equals </option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<div class="form-group m-r-5">
											<input type="number" class="category form-control" style="width: 60px;"
												placeholder="Unit">
										</div>
									</div>
									<div class="form-group">
										<div class="form-group m-r-5">
											<select class="category form-control" style="width: 80px;">
												<option value="Days"> Days </option>
												<option value="Months"> Months </option>
											</select>
										</div>
									</div>
									From
									<div class="form-group">
										<div class="form-group m-r-5">
											<select class="category form-control" ng-model="fromCustom"
												style="width: 80px;">
												<option value="today"> Today </option>
												<option value="yesterday"> Yesterday </option>
												<option value="tomorrow"> Tomorrow </option>
												<option value="custom"> Custom Date </option>
											</select>

											<input type="text" class="category form-control" style="width: 100px;"
												placeholder="dd/mm/yyyy" ng-if="fromCustom == 'custom'">
										</div>
									</div>
								</div>
								<!-- voucher  expire UI end  -->
							</div>
							<!-- disabled AND OR feature -->
							<!-- <div ng-show="category != 'Communique'" >
							<input 
									bs-switch 
									id="switch"
									state="cTools.operatorChange" 
									type="checkbox" 
									class="BSswitch form-control" 
									data-off-text="AND" 
									data-on-text="OR" 
									data-label-text="OR" 
									data-on-color="primary" 
									data-off-color="primary"
									onSwitchChange="operatorChange"
									ng-model="item.value"
									 
									>
								</div> -->
						<div style="display: block; margin-top: 20px;">

							<div class="form-group" ng-show="category != 'Communique'">
								<button type="button" class="btn btn-primary btn-sm editable-submit"
									style="border-radius: 0px;" ng-click="addToAudienceSegment($index,item);"
									ng-show="$last" title="Add"><i class="fa fa-plus"></i>
								</button>
							</div>
							<div class="form-group ">
								<button type="button" class="btn btn-danger btn-sm editable-submit"
									style="border-radius: 0px;" ng-click="removeFromAudienceSegment($index);"
									title="Remove"><i class="fa fa-minus"></i>
								</button>
							</div>
						</div>
						</fieldset>
					</div>

				</form>
			</div>
		</div>
	</div>
	<div class="col-md-1">
		<div class="panel panel-success" style="height:365px;">
			<div class="panel-heading" style="text-align:center">
				<h4 class="panel-title p-heading">Reach</h4>
			</div>
			<div class="panel-body">
				<div style="text-align:center">
					<div><i class="fa fa-2x fa-arrow-down" style="color:green"></i></div>
					<h3>
						<span class="label label-warning" id="lblAudienceCounter">0</span>
					</h3>
				</div>

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

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-primary">
			<div class="panel-heading ">
				<h4 class="panel-title p-heading">Selected Criteria</h4>
			</div>
			<div class="panel-body">
				<div ng-repeat="aud in audience">
					<div ng-repeat="cat in aud.Category">
						<label
							ng-show="audienceSegment[aud.Context][cat][0].selectedAttribute!=undefined"><strong>{{aud.Context}}->{{cat}}</strong></label>
							<label	ng-show="audienceSegment[aud.Context][cat][0].selectedpubattr!=undefined"><strong>{{aud.Context}}->{{cat}}</strong></label>
						<table class="table table-striped"
							ng-show="audienceSegment[aud.Context][cat][0].selectedAttribute!=undefined || audienceSegment[aud.Context][cat][0].selectedpubattr!=undefined"
							style="margin-bottom:0px;">
							<tbody>
								<tr ng-repeat="seg in audienceSegment[aud.Context][cat] ">
									<td style="padding:2px;">
										{{seg.selectedAttribute.text}}
										<div ng-if="seg.since.have == 'h'">
											Have Done
										</div>
										<div ng-if="seg.since.have == 'hn'">
											Have Not Done
											<span ng-if="seg.since.time">
												-> Since {{ seg.since.time }}
												<span ng-if="seg.since.type == 'd'">Days</span>
												<span ng-if="seg.since.type == 'h'">Hours</span>
												<span ng-if="seg.since.type == 'm'">Minutes</span>
												<span ng-if="seg.since.type == 's'">Seconds</span>
											</span>
											<span ng-if="seg.since.event">
												-> Of {{ seg.since.event }}
											</span>
										</div>
									</td>
									<td ng-show="cat=='Communique'"><strong>Publisher---></strong></td>
									<td>{{seg.selectedpubattr.text}}</td>
									<td>{{seg.subselectedpubattr.name}}</td>
									<td ng-show="cat=='Communique'"><strong>Subscriber---></strong></td>
									<td>{{seg.selectedsubattr.text}}</td>
									<td>{{seg.subselectedsubattr.name}}</td>
									<td style="padding:2px;" ng-if="seg.subselectedAttribute">
										{{seg.subselectedAttribute.name}}</td>
									<td style="padding:2px;" ng-if="!seg.subselectedAttribute">&nbsp;</td>
									<td style="padding:2px;">{{seg.operator}}</td>
									<td ng-if="seg.selectedAttribute.type!='time'" style="padding:2px;">{{seg.value}}
									</td>
									<td ng-if="seg.timeUnit" style="padding:2px;">{{seg.timeUnit}}</td>
									<td ng-if="seg.selectedAttribute.type=='time'" style="padding:2px;">
										{{seg.ft}}-{{seg.tt}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
	aria-hidden="true" id="geofence">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<form>
					<div class="form-group col-md-6">
						<label for="recipient-name" class="col-form-label">Name </label>
						<input type="text" class="form-control" id="recipient-name">
					</div>
					<div class="form-group col-md-6">
						<label for="message-text" class="col-form-label">Description </label>
						<textarea class="form-control" rows="1" id="message-text"></textarea>
					</div>
					<p style="color: red;" class="form-group col-md-6">{{ errorMessage }}</p>
					<div class="form-group col-md-6">
						<input id="pac-input" class="controls form-control" type="text" placeholder="Search Box" />
					</div>
				</form>
			</div>


			<div id="map" style="width: 100%;height: 420px;"></div>

			<div class="modal-footer">
				<button type="button" class="btn btn-primary" ng-click="addGeoFence()">Save changes</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<style>
	.pac-container {
		z-index: 999999999;
		max-width: 500px;
	}

	#pac-input {
		z-index: 0;
		position: absolute;
		left: 15px !important;
		top: 0px;
		width: 360px;
		margin-top: 4px;
		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
	}
</style>
