@extends('layout.masters')
@section('content')
	<div id="page-wrapper">
	  	<div class="container-fluid">
		    <div class="row">
		        <div class="welcome-container">
		          <h2>Welcome to Happyness Factory Tool</h2>
		          <input type="hidden" id="password-flag" value="{{$current_user['password_flag']}}">
		        </div>
		    </div>
		    <div class="row">
		    	<div class="col-sm-12 col-md-6 col-md-offset-3" id="message-row">
		    		@if(session()->has('message'))
					    <div class="alert alert-success">
					        {{ session()->get('message') }}
					    </div>
					@endif
		    	</div>
		    </div>
		    <div class="row">
		      	<div class="col-sm-12 col-md-12">
		          <div class="main-container border" style="margin-top : 50px;">
		            <h4>Upcoming Deployments</h4>
		            <table id="upcoming_deployments" class="table table-striped table-bordered" style="width:100%">
		              <thead>
		                <tr>
		                  <th>Deployment Title</th>
		                  <th>Server Name</th>
		                  <th>Deployment Type</th>
		                  <th>Scheduled Date</th>
		                  <th>Start Time</th>
		                  <th>End Time</th>
		                </tr>
		              </thead>
		              <tbody>
		              	@foreach($upcomingDeployments as $schedule)
				          	@if(date('Y-m-d') <= $schedule->schedule_date)
				                <tr>
				                  <td><a href="deployment-detail/{{'upcoming'}}/{{$schedule->schedule_id}}">{{$schedule->dep_title}}</a></td>
				                  <td>{{$schedule->server_name}}</td>
				                  <td>{{$schedule->dep_type}}</td>
				                  <td>{{date('d M Y', strtotime($schedule->schedule_date))}}</td>
				                  <td>{{date('h:i A', strtotime($schedule->dep_time_start))}}</td>
				                  <td>{{date('h:i A', strtotime($schedule->dep_time_end))}}</td>
				                </tr>
			            	@endif
				        @endforeach
		              </tbody>
		            </table>
		          </div>
		          <div class="main-container" style="margin-top : 50px;">
		            <h4>Complete Deployments</h4>
		            <table id="complete_deployments" class="table table-striped table-bordered" style="width:100%">
		              <thead>
		                <tr>
		                  <th>Deployment Title</th>
		                  <th>Server</th>
		                  <th>Deployed Branch</th>
		                  <th>Deployed By</th>
		                  <th>Deployed Date</th>
		                  <th>Deployed Time</th>
		                  <th>Status</th>
		                </tr>
		              </thead>
		              <tbody>
		              	@foreach($completeDeployments as $deploy)
			                <tr>
			                  <td><a href="deployment-detail/{{'completed'}}/{{$deploy->dep_run_id}}">{{$deploy->dep_title}}</a></td>
			                  <td>{{$deploy->server_name}}</td>
			                  <td>{{$deploy->dep_branch}}</td>
			                  <td>{{$deploy->name}}</td>
			                  <td>{{date('d M Y', strtotime($deploy->dep_date))}}</td>
			                  <td>{{date('h:i A', strtotime($deploy->updated_at))}}</td>
			                  <td>{{$deploy->dep_result}}</td>
			                </tr>
			            @endforeach
		              </tbody>
		            </table>
		          </div>
		        </div>
	      	</div>
	  	</div>
	</div>
  <!-- /.container-fluid -->
	<script type="text/javascript">
		$('.branchModal').click(function() {
			console.log('success');
			var id = $(this).data("id");
			var route = $(this).data('route');
			var depId = $(this).data('depid');
			$('#route').val(route);
			$("#id").val(id);
			$("#depid").val(depId);
	});
	</script>
	<div class="modal fade" id="branchModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel">
	  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="customModalLabel">Branch details</h4>
		      </div>
		      <div class="modal-body">
		        <input type="hidden" id="id" name=id>
		        <input type="hidden" id="depid" name=depid>
				<div class="form-group">
					<label>Select Branch</label>
					<div class="custom-radio">
						<div class="form-check">
						<label>
							<input type="radio" name="radio" value="master" checked> <span class="label-text">Master</span>
						</label>
						</div>
						<div class="form-check">
							<label>
								<input type="radio" name="radio" value="other"> <span class="label-text">Other branch</span>
							</label>
						</div>
					</div>
					<div class="custom-radio">
					</div>
				</div>
				<div class="form-group" id='branch-flag' style="display:none">
					<label for="dep_desc">Branch Name</label>
					<input type="text" name="branch-name" id="branch-name" >
				</div>
		      </div>
		      <div class="modal-footer">
		        <a type="button" class="btn btn-danger btn-sm" data-dismiss="modal">No</a>
				<a type="submit" class="btn btn-formSubmit btn-sm" id="route">Yes</a>
		      </div>
		    </div>
	  </div>
	</div>

	<div class="modal" id="passwordModal" tabindex="-1" role="dialog">
	  	<div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	<div class="modal-header">
		        <h4 class="modal-title">Set Your Password</h4>
		      </div>
		      	<div class="modal-body">
		        	<form>
		        		<div class="row">
			        		<div class="col-md-6">
								<div class="form-group">
									<label for="exampleInputPassword1">Password</label>
									<input type="password" class="form-control" id="password" placeholder="Password" onkeyup="showPasswordIndicators(this.value);">
									<p class="help-block red-text"><span id="password_yes_one">min 8 chars</span> <span id="password_yes_two">1 number</span> <span id="password_yes_three">1 CAPS</span></p>
									<p class="help-block red-text" id="passerrormsg">Please enter valid password</p>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label for="exampleInputPassword1">Confirm Password</label>
									<input type="password" class="form-control cPassword" id="confirm-password" placeholder="Confirm Password">
									<p class="help-block red-text" id="confpasserrormsg">Must match the password</p>
								</div>
							</div>
						</div>
					</form>
		      	</div>
		      	<div class="modal-footer">
			        <button type="button" class="btn btn-success" id="password-submit">Submit</button>
		      	</div>
		    </div>
	  	</div>
	</div>

	<script type="text/javascript">
	 $(document).ready(function(){
	 	setTimeout(function() {
		    $('#message-row').hide();
		}, 2000);
	 	$("#passerrormsg").hide();
	 	$("#confpasserrormsg").hide();
	 	if($("#password-flag").val() == 0){
		 	$('#passwordModal').modal({
			    backdrop: 'static',
			    keyboard: false
			});
		 }
	 	$('#upcoming_deployments').DataTable();
	 	$('#complete_deployments').DataTable({
	 		"order": [[ 4, "desc" ], [ 5, "desc" ]]
	 	});
		$('input[type=radio][name=radio]').change(function() {
			console.log('inside the block');
			console.log(this.value);
			if (this.value == 'master') {
				$('#branch-flag').hide();
			}else if (this.value == 'other') {
				$('#branch-flag').show();
			}

		});
	});
	$('#route').click(function(e) {
		$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
		});
		e.preventDefault();
		var deploymentId = document.getElementById('depid').value;
		var id = document.getElementById('id').value;
		var route = document.getElementById('route').value;
		var branch_name = '';
		if($('input[type=radio][name=radio]:checked').val() == 'master'){
			branch_name = 'master';
		}else{
			branch_name = document.getElementById('branch-name').value;
		}
		if(branch_name != ""){
			$('#branchModal').modal('hide');
			$("#build-btn").attr("disabled", true);
			$.ajax({
			    type: "POST",
					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			    url: route, // This is what I have updated
			    data: { 'id': id, 'branch_name': branch_name, 'depId': deploymentId },
					datatype: 'json',
					beforeSend: function(){
				    // Show image container
						console.log("before send");
				    $("#loader").show();
				  },
					success: function (data) {
						console.log("Return success");
	          // location.reload();
	        },
	        error: function (data) {
	          console.log(data);
						$("#build-btn").attr("disabled", false);
						$("#loader").hide();
	        },
				  complete:function(data){
				    // Hide image container
				  }

			});
		}else{
			alert('Branch name required');
		}
	});

	$('#password-submit').click(function(e) {
		var password = $("#password").val();
		// alert(password);
		var passwordResult = validPassword(password);
		// alert(passwordResult);
		if(password != ""){
			$("#passerrormsg").hide();
			if(passwordResult){
				var confirmPassword = $("#confirm-password").val();
				if(password == confirmPassword){
					$("#confpasserrormsg").hide();
					$.ajaxSetup({
        				headers: {
            				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        				}
					});
					e.preventDefault();
					$("#password-submit").attr("disabled", true);
					$.ajax({
					    type: "POST",
							headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					    url: "update-password", // This is what I have updated
					    data: { 'password': password },
						datatype: 'json',
						beforeSend: function(){
					    // Show image container
							console.log("before send");
					    	$("#loader").show();
					  	},
						success: function (data) {
							console.log("Return success");
							// $("#password-success-alert").show();
		          			location.reload();
		        		},
		        		error: function (data) {
		          			console.log(data);
							$("#build-btn").attr("disabled", false);
							$("#loader").hide();
		        		},
					  	complete:function(data){
					    // Hide image container
					  	}
					});




				} else {
					$("#confpasserrormsg").show();
				}
			}
		} else {
			$("#passerrormsg").show();
		}
	});

	$(".cPassword").keyup(function (){
	  	var pass = $("#password").val();
	  	var conf_password = $("#confirm-password").val();
	  	if (pass == conf_password)
	  	{
	    	$("#confpasserrormsg").hide(); 		
	  	} 
	});

	function validPassword(element) {
	  	if (element.length > 0) {
	    	var pattern_pass = new RegExp(/^(?=.*?[A-Z])(?=.*?[0-9]).{8,}$/);            
	    	return pattern_pass.test(element);
	  	} 
	  	else
	    	return false;
	}

	function showPasswordIndicators(passwordText){
		$("#passerrormsg").hide();
	  var pattern3 = new RegExp(/[A-Z]{1,}/);
	  var pattern2 = new RegExp(/[0-9]{1,}/);

	  if( passwordText.length >= 8  )
	    $("#password_yes_one").addClass("green-text");
	  else
	    $("#password_yes_one").removeClass("green-text");
	  if (pattern2.test(passwordText) == true)
	    $("#password_yes_two").addClass("green-text");
	  else
	    $("#password_yes_two").removeClass("green-text");
	  if (pattern3.test(passwordText) == true)
	    $("#password_yes_three").addClass("green-text");
	  else
	    $("#password_yes_three").removeClass("green-text");
	}
	</script>
	<!-- Image loader -->
	<div id='loader' style="display:none;">
	  <img src="{{asset('assets/img/page-loader.gif')}}" width='32px' height='32px'>
	</div>
	<!-- Image loader -->
@endsection