<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" 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" 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" href="javascript:;" style="font-size:16px;width:120px;" ng-click="selectContext(aud.Context)" ng-class="{'active':aud.Context==context}">{{aud.Context}}</a>
	                </p>
	                <label style="text-align:center;padding-left:30%;padding-right:30%">{{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" href="javascript:;" style="font-size:13px;width:120px" ng-click="selectCategory(cat);" ng-class="{'active':cat==category}">{{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 }}
                <button 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;">

						<!-- live event ui changes drop down -->
						<div style="width: 100%; height:auto; text-align: left; margin-bottom: 10px;">
							<div class="form-group" ng-show="category == 'Events'">
								<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">  
								<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}}');operandChange('{{item.selectedAttribute.label}}');validateProperty($index);" ng-disabled="!$last">
									<option value="" ng-show="false" selected disabled> {{category}}</option>
								</select>
							</div>

						</div>
						<span style="display: none;"> {{ item.subselectedAttribute }} </span>
						<span style="display: none;"> {{ item.selectedAttribute }} </span>
	                    	
	                        <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-disabled="!$last" 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"> 
								<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" >    
	                            <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" >                        
	                            <select class="form-control" style="width:100px;" ng-show="item.selectedAttribute.multiple==false" 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'" ng-model="item.value" ng-keypress="filterNumberValue($event,item.selectedAttribute.type)"  ng-model-options="{updateOn: 'blur'}" placeholder="Enter Value" />
	                            
	                            <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')" 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  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 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="category form-control" ng-model="item.since.event" style="width: 100px;" >
											<option value="{{ attr.text }}" ng-repeat="attr in cat.attributes"> {{ attr.text }} </option>
										</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>
							
							<div class="form-group">
								<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>
	                    </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>
	                		<table class="table table-striped" ng-show="audienceSegment[aud.Context][cat][0].selectedAttribute!=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 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.selectedAttribute.type=='time'" style="padding:2px;">{{seg.ft}}-{{seg.tt}}</td>
		                            </tr>                            
		                        </tbody>
		                    </table>                                			    
	                	</div>
	                </div>	    
            </div>
        </div>
	</div>
</div>
