<div ng-controller="campaignsController">
  <div class="col-md-6 pull-right" style="width: auto">
  <label>Period</label> &nbsp;&nbsp; 
    <div id="advance-daterange" class="btn btn-white">
      <span id="dtSpan"></span>
      <i class="fa fa-angle-down fa-fw"></i>
    </div>
</div>
<div class="row">
	<div class="col-md-6">
		<h1 class="page-header">
			Campaign Management
		</h1>
	</div>
	<div class="col-md-6" style="margin: 20px 0 10px 0;">
		<div class="pull-right">
			<a href="dashboard?action=camp#/camp/create" title="Create New Campaign">
				<button type="button" class="btn btn-primary m-r-5 m-b-5">Create New Campaign</button>
			</a>
		</div>
	</div>
</div>

<div class="modal modal-campaign fade" id="modal-dialog-campaign-info">
   <div class="modal-content" style="width:32%; margin: 0 auto;">
     <div class="modal-header modal-header-campaign">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title">Campaigns Info</h4>
     </div>
     <div class="modal-body">
       <div class="row items-row">
         <div class="col-xs-3">
           <img src="assets/img/ask-icon.svg" alt="Ask" style="width: 80%;">
         </div>
         <div class="col-xs-9">
           <ul>
             <li class="title">ASK</li>
             <li class="sub-text">Insights on Products / Feature</li>
             <li class="sub-text">Feedback (Un-install Reasons)</li>
             <li class="sub-text">Customer Satisfaction</li>
           </ul>
         </div>
       </div>
       <div class="row items-row">
         <div class="col-xs-3">
           <img src="assets/img/inform-icon.svg" alt="Ask" style="width: 60%;">
         </div>
         <div class="col-xs-9">
           <ul>
             <li class="title">INFORM</li>
             <li class="sub-text">New Products</li>
             <li class="sub-text">Related Products</li>
             <li class="sub-text">Happenings (Events, Offers)</li>
           </ul>
         </div>
       </div>
       <div class="row">
         <div class="col-xs-3">
           <img src="assets/img/monetize-icon.svg" alt="Ask" style="width: 60%;">
         </div>
         <div class="col-xs-9">
           <ul>
             <li class="title">MONETIZE</li>
             <li class="sub-text">Coupon Codes</li>
             <li class="sub-text">Offers / Discounts</li>
             <li class="sub-text">Upsell / Cross-sell</li>
           </ul>
         </div>
       </div>
     </div>
     <div class="modal-footer modal-footer-campaign">
       <!-- <a href="javascript:;" class="btn btn-sm btn-white" data-dismiss="modal">Close</a> -->
       <a href="dashboard?action=camp#/camp/create" class="btn btn-sm btn-success">Go to Campaigns</a>
     </div>
   </div>
</div>
 
<div id="content" class=" content-container">      
   <div class="row" style="padding-left:10px;padding-right:10px;">
     <div class="panel panel-inverse panel-with-tabs" data-sortable-id="ui-unlimited-tabs-1">
       <div class="p-0 campaign-panel-heading">
         <!-- begin nav-tabs -->
         <div class="tab-overflow">
           <ul class="nav nav-tabs nav-tabs-inverse" style="width: 100%;">
             <li class="active" style="width: 20%;"><a href="#" data-toggle="tab" id="btnActive">Active Campaigns</a></li>
             <li class="" style="width: 20%;"><a href="#" data-toggle="tab" id="btnDraft">Draft Campaigns</a></li>
             <li class="" style="width: 20%;"><a href="#" data-toggle="tab" id="btnPast">Past Campaigns</a></li>
             <li id="downloadCSV" attr-tableid="campaignTable"><i id="u-downloadLink" class="fa fa-2x fa-download" title="Campaign csv" style="font-size: 18px;position: relative;top: 6px;right: 14px;float: right;cursor: pointer;"></i></li>
           </ul>
         </div>
       </div>
       <div class="tab-content" style="padding-top: 0px;">
         <div class="tab-pane fade active in" id="active">
           <div class="panel-body">
             <div class="table-responsive margin-top-15">
             	<table class="table table-bordered" id="tblCampaigns" >
		        	<thead >
                <th>
                  <input type="checkbox" id="selectAllCheckbox">
                  <label for="selectAllCheckbox">Select All</label>
              </th>
		        		<th>Type</th>
		        		<th>Name</th>
		        		<th>Audience Segment</th>
	        			<th>Reachable Audience</th>
                <th>Sent</th>
                <th id="receivedTo">Received</th>   
                <th id="impressionRate">Impression Rate</th>
	        			<th id="clickedTo">Clicked</th>
	        			<th id="ctr" >CTR</th>
                <th id="conversion">Conversion</th>
	        			<th>Start Date</th>
                <th>End Date</th>
	        			<th>Action</th>
		        	</thead>
		        	<tbody ></tbody>
		       </table>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- Dialog for download Start-->
   <div class="modal fade" id="modal-dialog">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title">Download Data</h4>
         </div>
         <div class="modal-body">
           <form class="form-horizontal">
             <div class="form-group">
               <div class="col-md-12">
                 <div class="checkbox" id="divDownloadAll">
                   <label>
                     <input type="checkbox" value="" name="downloadOptions" id="chkDownloadAll"> Download All
                   </label>
                 </div>
                 <div class="checkbox" id="divDownloadByDate">
                   <label>
                     <input type="checkbox" value="" name="downloadOptions" id="chkDownloadByDate"> Download users who have <span id="spanTypeText">uninstalled</span> from
                   </label>
                   <input type="text" style="width:100px" id="txtStartDate"> to
                   <input type="text" style="width:100px" id="txtEndDate">
                 </div>
                 <div class="checkbox" id="divDownloadBySessions">
                   <label>
                     <input type="checkbox" value="" name="downloadOptions" id="chkDownloadBySessions"> Download users who have uninstalled and had
                   </label>
                   <select id="ddlSessionOperator">
                     <option value="$eq">=</option>
                     <option value="$gt">&gt;</option>
                     <option value="$gte">&gt;=</option>
                     <option value="$lt">&lt;</option>
                     <option value="$lte">&lt;=</option>
                   </select>
                   <input type="text" style="width:90px" id="txtSessionVal"> sessions
                 </div>
                 <div class="checkbox" id="divDownloadByDuration">
                   <label>
                     <input type="checkbox" value="" name="downloadOptions" id="chkDownloadByDuration">Download users who have uninstalled and used the app for
                   </label>
                   <select id="ddlDurationOperator">
                     <option value="$eq">=</option>
                     <option value="$gt">&gt;</option>
                     <option value="$gte">&gt;=</option>
                     <option value="$lt">&lt;</option>
                     <option value="$lte">&lt;=</option>
                   </select>
                   <input type="text" style="width:90px" id="txtDurationVal"> minutes
                 </div>
               </div>
             </div>
           </form>
           <!--Note: If the download file size is > 16MB it will be emailed to your account.-->
         </div>
         <div class="modal-footer">
           <a href="javascript:;" class="btn btn-sm btn-white close-model" data-dismiss="modal">Close</a>
           <a href="javascript:constructDownloadFilterQuery();" class="btn btn-sm btn-success">Download</a>
         </div>
       </div>
     </div>
   </div>
   <!-- Dialog for download End-->
   <!-- end #content -->
   <!-- begin scroll to top btn -->
   <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
   <!-- end scroll to top btn -->
   <!-- Dialog for delete Start-->
   <div class="modal fade" id="modal-alert" aria-hidden="true" style="display: none;">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title" id="dialogheader">Remove App</h4>
         </div>
         <div class="modal-body">
           <div class="alert alert-danger m-b-0">
             <h4><i class="fa fa-info-circle"></i> <span id="spanAppName"></span></h4>
             <p>Are you sure to remove this app?</p>
           </div>
         </div>
         <div class="modal-footer">
           <a href="javascript:;" class="btn btn-sm btn-white" data-dismiss="modal" style="width:15%;font-size:15px;">No</a>
           <a id="deleteApp" href="javascript:deleteApp();" class="btn btn-sm btn-danger" style="width:15%;background:#B83E3B;border-color:#B83E3B;font-size:15px;">Yes</a>
         </div>
       </div>
     </div>
   </div>
 </div>
 
<!-- Dialog  ChildApps Start-->
<div class="modal fade" id="childapps-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Target Child Apps</h4>
            </div>
            <div class="modal-body" >
            	<div>
            		<table class="table" style="margin-bottom:0px;">
            		<tr>
            			<td style="border:none">
            				
            			</td>
            			<td colspan="2" style="border:none;padding-right:50px;">
            				<input type="textbox" placeholder="Search by name" class="form-control" ng-model="searchTerm"> 
            			</td>
            			
            			<td style="border:none;">
            				
            			</td>
            		</tr>
            		</table>
            	</div>
            	<div style="height:300px;overflow:auto">
            	<table class="table">
            		<thead>
            			<th><input ng-disabled="editMode" type="checkbox" ng-click="markAllSelected()" ng-model="selectedAll" > Select All</th>
            			
            			<th>Name</th>
            			<th>Id</th>
            			<th><input type="checkbox" ng-click="markAllApproved()" ng-model="approvedAll"> Approve All </th>
            			<th ng-if="editMode">Delete</th>
            		</thead>
            		<tbody ng-repeat="app in childApps | filter: {name:searchTerm}">
            			<tr >
            				<td><input type="checkbox" ng-model="app.selected" ng-click="deselectSelectedAllFlag(app.selected)" ng-disabled="app.hide" /></td>
            				<td>{{app.name}}</td>
            				<td>{{app.childappid}}</td>
            				<td><input type="checkbox" ng-model="app.approved" ng-click="deselectApprovedAllFlag(app.approved)"/></td>
            				<td ng-if="editMode"><input type="checkbox" ng-model="app.deleted" ng-disabled="!app.hide" /></td>
            			</tr>
            		</tbody>
            	</table>
            	</div>	                                                            
            </div>
            <div class="modal-footer">
            	<label style="color:red;" ng-show="isError">It is required to select all apps or minimum one.</label>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="saveCampaign()" ng-show="!edit" >Save Campaign</button>                
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="cancel()" data-dismiss="modal">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  ChildApps End-->
</div>
<style>
  /* Enable word wrapping for cells in the "camp name" and "aud seg" columns */
#tblCampaigns td:nth-child(2) {
 white-space: normal;
 word-wrap: break-word;
}
#tblCampaigns td:nth-child(3) {
white-space: normal;
word-wrap: break-word;
}
</style>