<?php $this->load->view('header') ?>
<div class="content">
<div class="container-fluid">
<form id="newform" novalidate="novalidate">
	<div class="row">
		<div class="col-md-12">
			<div class="card" id="card1">
				<div class="header" style="margin-bottom:15px;">
					<h4 class="title"><i class="fa fa-file-text-o"></i> Create A New Campaign</h4>
				</div>
				<div class="content">
					<div class="progress">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
							<span class="sr-only">20% Complete</span>
						</div>
					</div>
					<fieldset>
						<div class="form-group">
							<label>Name:</label>
							<input required="" class="form-control" id="newc_name" aria-required="true" type="text">
						</div>
					</fieldset>
					<fieldset>
						<div class="form-group">
							<label>Domain:</label>
							<select required="" class="form-control" id="newc_domain" aria-required="true">
								<option value="<?php echo base_url(); ?>keyword"><?php echo base_url(); ?>keyword</option>
							</select>
						</div>
					</fieldset>

					<button class="btn btn-info btn-fill" id="next1">Next <i class="fa fa-caret-right"></i></button> 
				</div>
			</div>

			<div class="card" id="card2" style="display:none">
				<div class="header" style="margin-bottom:15px;">
					<h4 class="title"><i class="fa fa-file-text-o"></i> Create A New Campaign</h4>
				</div>
				<div class="content">
					<div class="progress">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
							<span class="sr-only">40% Complete</span>
						</div>
					</div>
					<fieldset>
						<div class="form-group">
							<label>Enter Your Keywords:<br>(one per line)</label>
							<textarea required="" class="form-control" rows="15" cols="50" id="newc_keywords" aria-required="true"></textarea>
						</div>
					</fieldset>
					<button class="btn btn-warning btn-fill" id="back2">
						<i class="fa fa-caret-left"></i> Back
					</button> 
					<button class="btn btn-info btn-fill" id="next2">Next 
						<i class="fa fa-caret-right"></i>
					</button> 
				</div>                          
			</div>

			<div class="card" id="card3" style="display:none">
				<div class="header" style="margin-bottom:15px;">
					<h4 class="title"><i class="fa fa-file-text-o"></i> Create A New Campaign</h4>
				</div>

				<div class="content">
					<div class="progress">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
							<span class="sr-only">60% Complete</span>
						</div>
					</div>

					<fieldset>
						<div class="form-group">
							<label>You can give some keywords more weight than others:<br>(or <a href="#" class="next3">skip</a>)</label>										
						</div>
					</fieldset>

					<div class="table-full-width">
						<table class="table">
							<thead>
								<tr>
									<th>Keyword</th>
									<th>Weight</th>
								</tr>
							</thead>
							<tbody id="weightsbody"></tbody>
						</table>
					</div>

					<button class="btn btn-warning btn-fill" id="back3">
						<i class="fa fa-caret-left"></i> Back
					</button> 
					<button class="btn btn-info btn-fill next3">Next 
						<i class="fa fa-caret-right"></i>
					</button> 
				</div>                            
			</div>

			<div class="card" id="card4" style="display:none">
				<div class="header" style="margin-bottom:15px;">
					<h4 class="title"><i class="fa fa-file-text-o"></i> Create A New Campaign</h4>
				</div>

				<div class="content">
					<div class="progress">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
							<span class="sr-only">80% Complete</span>
						</div>
					</div>

					<fieldset>
						<div class="form-group">
							<label>Destination URL:</label>
							<input required="" url="true" class="form-control" id="newc_url" aria-required="true" type="text">
						</div>
					</fieldset>

					<p>You can use any kind of super-url you want (store front, 2-step search etc.) - just use <b>{{keyword}}</b> in the URL and KeywordRotator will replace that with the actual random keyword.</p>
					<p>e.g. <i>https://www.amazon.com/s/ref=nb_sb_noss?url=me%3DA2U644CSJYMQBD&amp;field-keywords=<b>{{keyword}}</b></i></p>
					<p><a target="_blank" href="/superurl.php">Need some help? Click here to generate the a 2-step search URL.</a></p>
					<button class="btn btn-warning btn-fill" id="back4">
						<i class="fa fa-caret-left"></i> Back
					</button> 
					<button class="btn btn-info btn-fill" id="next4">Next 
						<i class="fa fa-caret-right"></i>
					</button> 
				</div>                            
			</div>
</form>
			<form id="mainform" action="new_keywords" method="POST" novalidate="novalidate">
				<div class="card" id="card5" style="display:none">
					<div class="header" style="margin-bottom:15px;">
						<h4 class="title"><i class="fa fa-file-text-o"></i> Create A New Campaign</h4>
					</div>

					<div class="content">
						<div class="progress">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
								<span class="sr-only">100% Complete</span>
							</div>
						</div>

						<fieldset>
							<div class="form-group">
								<label>Name:</label>
								<input class="form-control" id="newcampaign_name" name="newcampaign_name" readonly="" type="text">
							</div>
						</fieldset>

						<fieldset>
							<div class="form-group">
								<label>Domain:</label>
								<input class="form-control" id="newcampaign_domain" name="newcampaign_domain" readonly="" type="text">
							</div>
						</fieldset>

						<fieldset>
							<div class="form-group">
								<label>URL:</label>
								<input class="form-control" id="newcampaign_url" name="newcampaign_url" readonly="" type="text">
							</div>
						</fieldset>

						<fieldset>
							<div class="form-group">
								<label>Keywords:</label>
								<textarea class="form-control" rows="5" cols="50" id="newcampaign_keywords" name="newcampaign_keywords" readonly=""></textarea>
							</div>
						</fieldset>

						<button class="btn btn-warning btn-fill" id="back5"><i class="fa fa-caret-left"></i> Back</button>
						<button class="btn btn-success btn-fill" type="submit" name="create" id="create">Create Campaign <i class="fa fa-caret-right"></i></button> 
					</div>                             
				</div>

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


<script src="<?php echo base_url(); ?>assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.validate.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/moment.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap-datetimepicker.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap-selectpicker.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap-checkbox-radio-switch-tags.js"></script>
<script src="<?php echo base_url(); ?>assets/js/chartist.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/sweetalert2.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery-jvectormap.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.bootstrap.wizard.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap-table.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.datatables.js"></script>
<script src="<?php echo base_url(); ?>assets/js/fullcalendar.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/light-bootstrap-dashboard.js"></script>

<script type="text/javascript">
	
var alldone = "no";

function unique(list) 
	{
	var result = [];
	$.each(list, function(i, e) {
		if (($.inArray(e, result) == -1)&&e.length>1) result.push(e);
	});
	return result;
	}
	$(document).ready(function(){	

	var validator = $( "#newform" ).validate({ submitHandler: function(form) {return false;}});
	var validator2 = $( "#mainform" ).validate({ submitHandler: function(form) 
		{
		if(alldone!="yes")
			return false;
		else
			return true;
		}});			
		
	Chartist.Pie('#lateststats',{labels:["Banana","Orange","Apple"],series:[1,1,2]});
	
	$("#next1").click(function(e){
		if(validator.element( "#newc_name" )&&validator.element( "#newc_domain" ))
			{
				$("#card1").hide();
				$("#card2").show();
			}
	});

	$("#next2").click(function(){
		if(validator.element( "#newc_keywords" ))
			{
				$("#weightsbody").html("");
				if($("#newc_keywords").val())
					{
					var ks = $("#newc_keywords").val().split("\n");
					ks = unique(ks);
					$.each(ks, function(k)
						{
						$("#weightsbody").append("<tr class=\"kw_row\"><td><input type=\"text\" class=\"form-control kw_value\" value=\""+ks[k]+"\"></td><td><input  class=\"form-control kw_weight\" type=\"text\" value=\"1\"></td></tr>");
						});
					}
				$("#card2").hide();
				$("#card3").show();
			}	
	});
		
	$(".next3").click(function(){
		$("#card3").hide();
		$("#card4").show();
	});
	
	$("#next4").click(function(){
	if(validator.element( "#newc_url" ))
		{
			$("#newcampaign_name").val($("#newc_name").val());
			$("#newcampaign_url").val($("#newc_url").val());
			$("#newcampaign_domain").val($("#newc_domain").val());
		
			var kws = {};
			$(".kw_row").each(function(index){
				var v = $(this).find(".kw_value").val();
				var w = $(this).find(".kw_weight").val();
				kws[v]=w;					
			});
			$("#newcampaign_keywords").val(JSON.stringify(kws));
			
			$("#card4").hide();
			$("#card5").show();
		}
	});
		
	$("#create").click(function(){alldone="yes";});
	
	$("#back2").click(function(){
		$("#card2").hide();
		$("#card1").show();
	});
	
	$("#back3").click(function(){
		$("#card3").hide();
		$("#card2").show();
	});
	
	$("#back4").click(function(){
		$("#card4").hide();
		$("#card3").show();
	});
	
	$("#back5").click(function(){
		$("#card5").hide();
		$("#card4").show();
	});

});
</script>

<div class="sweet-container">
	<div class="sweet-overlay" tabindex="-1"></div>
	<div class="sweet-alert" style="display: none" tabindex="-1">
		<div class="icon error">
			<span class="x-mark">
				<span class="line left"></span>
				<span class="line right"></span>
			</span>
		</div>
		<div class="icon warning"> 
			<span class="body"></span> 
			<span class="dot"></span> 
		</div> <div class="icon info"></div> 
		<div class="icon success"> 
			<span class="line tip"></span> 
			<span class="line long"></span> 
			<div class="placeholder"></div> 
			<div class="fix"></div> 
		</div> 
		<img class="sweet-image"> <h2>Title</h2>
		<div class="sweet-content">Text</div>
		<hr class="sweet-spacer">
		<button class="sweet-confirm">OK</button>
		<button class="sweet-cancel">Cancel</button>
	</div>
</div>