<?php include 'header.php'; ?>

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
                <h1 class="my-3 h1">Social Account Verify</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Social Account Verify</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>

<hr class="mb-4">
<!-- /.content-header -->

<div class="progress md-progress mb-4">
	<div class="progress-bar progress-bar-striped bkcolor-theme" id="progress" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">0/5</div>
</div>

<!-- Main content -->
<section class="content">
    <div class="container-fluid1">		       
		
			<!-- Email -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<i class="fas fa-envelope color-theme fa-2x"></i>
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">Email</h4>
							<div>
								Verify your Email account
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
							<?php if ($_SESSION['tm_is_email_verified'] == 0) { ?>
							<button type="button" id="btn-email-verify" class="btn btn-success waves-effect waves-light">Verify</button>
							<?php } else { ?>
							<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
							<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
		
		
			<!-- SMS -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<i class="fas fa-phone color-theme fa-2x"></i>
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">SMS</h4>
							<div>
								Verify your phone number with SMS code
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
							<?php if ($_SESSION['tm_is_sms_verified'] == 0) { ?>
								<button type="button" id="btn-sms-verify" class="btn btn-success waves-effect waves-light">Verify</button>
							<?php } else { ?>
								<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
							<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
			
			
			<!-- Twitter -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<!--i class="fas fa-envelope color-theme fa-2x"></i-->
					<img src="images/twitter.png" alt="Twitter" width="60">
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">Twitter</h4>
							<div>
								Verify your Twitter account
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
						<?php if ($_SESSION['tm_is_twitter_verified'] == 0) { ?>
							<button type="button" id="btn-twitter-verify" class="btn btn-success waves-effect waves-light">Verify</button>
						<?php } else { ?>
								<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
						<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
			
			
			<!-- Google -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<!--i class="fas fa-envelope color-theme fa-2x"></i-->
					<img src="images/google.png" alt="Google" width="60">
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">Google</h4>
							<div>
								Verify your Google account
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
						<?php if ($_SESSION['tm_is_google_verified'] == 0) { ?>
							<button type="button" id="btn-google-verify" class="btn btn-success waves-effect waves-light">Verify</button>
						<?php } else { ?>
								<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
						<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
			
			
			<!-- Facebook -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<!--i class="fas fa-envelope color-theme fa-2x"></i-->
					<img src="images/facebook.png" alt="Facebook" width="60">
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">Facebook</h4>
							<div>
								Verify your Facebook account
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
						<?php if ($_SESSION['tm_is_facebook_verified'] == 0) { ?>
							<button type="button" id="btn-facebook-verify" class="btn btn-success waves-effect waves-light">Verify</button>
						<?php } else { ?>
							<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
						<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
			
			
			<!-- LinkedIn -->
			<div class="card mb-5">
				<div class="card-body display-flex">
				
				  <!-- Grid column -->
				  <div class="settings-icon">
					<!--i class="fas fa-envelope color-theme fa-2x"></i-->
					<img src="images/linkedin.png" alt="LinkedIn" width="60">
				  </div>
				  <!-- Grid column -->

				  <!-- Grid column -->
				  <div class="settings-content width-100">
					
					<div class="row">
						<div class="col-sm-8">	
							<h4 class="font-weight-bold">LinkedIn</h4>
							<div>
								Verify your LinkedIn account
							</div>
						</div>
						<div class="col-sm-2">	
							<h4 class="font-weight-bold">5%</h4>
							<div>
								Bonus
							</div>
						</div>
						<div class="col-sm-2">	
						<?php if ($_SESSION['tm_is_linkedin_verified'] == 0) { ?>
							<button type="button" id="btn-linkedin-verify" class="btn btn-success waves-effect waves-light">Verify</button>
						<?php } else { ?>
							<a href="javascript:void(0);" class="waves-effect text-success mt-3"><i class="w-fa fas fa-check"></i> Verified </a>
						<?php } ?>
						</div>
					</div>
					
				  </div>
				  <!-- Grid column -->
				</div>
			</div>
       
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<!-- Modal Small Size -->
<div class="modal fade" id="modalSmsVerification" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Sms Verification</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>                
            </div>
            <div class="modal-body">				
				<div class="form-group">
					<label>Please enter sms verification code</label>
					<input type="text" class="form-control" placeholder="Sms Verification Code" id="sms_code" />
				</div>
            </div>
            <div class="modal-footer">
				<button type="button" id="btn-verify-sms-code" class="btn btn-info waves-effect waves-light">Verify</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>

<script>

	change_progress();
	
	function change_progress() {	
		no_of_social_account_verified = 0;
		
		<?php if ($_SESSION['tm_is_email_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>
		
		<?php if ($_SESSION['tm_is_sms_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>
		
		<?php if ($_SESSION['tm_is_twitter_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>	

		<?php if ($_SESSION['tm_is_facebook_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>
		
		<?php if ($_SESSION['tm_is_linkedin_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>
		
		<?php if ($_SESSION['tm_is_google_verified'] == 1) { ?>
			no_of_social_account_verified = no_of_social_account_verified + 1;
		<?php } ?>
		
		total_no_of_social_account = 6;
		progress_percentage = no_of_social_account_verified/total_no_of_social_account*100;
		$("#progress").css("width",progress_percentage+'%');
		$("#progress").html((no_of_social_account_verified)+'/'+total_no_of_social_account);
	}

    $("#btn-email-verify").click(function () {
		$(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
		$.ajax({url: 'controllers/send_verification_email.php',
			data: {
			},
			type: 'post',
			dataType: 'JSON',
			context: this,
			success: function (output) {
				if (output.status == 200) {
					toastr.success(output.message);
				} else {
					toastr.error(output.message);
				}
				$(this).html('Verify').attr('disabled', false);
			}
		});
    });	
	
	$("#btn-sms-verify").click(function () {
		$(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
		$.ajax({url: 'controllers/send_verification_sms.php',
			data: {
			},
			type: 'post',
			dataType: 'JSON',
			context: this,
			success: function (output) {
				if (output.status == 200) {
					toastr.success(output.message);
					$('#modalSmsVerification').modal('show');
				} else {
					toastr.error(output.message);
				}
				$(this).html('Verify').attr('disabled', false);
			}
		});
    });
	
	$("#btn-verify-sms-code").click(function () {		
		if( $("#sms_code").val() == '' ) {
			toastr.error("Please enter sms verification code");
		} else {
			$(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
			$.ajax({url: 'controllers/verify_sms_code.php',
				data: {
					sms_code: $("#sms_code").val(),
				},
				type: 'post',
				dataType: 'JSON',
				context: this,
				success: function (output) {
					if (output.status == 200) {
						toastr.success(output.message);
						$('#modalSmsVerification').modal('hide');
						$("#sms_code").val('');
						window.location.reload();
					} else {
						toastr.error(output.message);
						$("#sms_code").val('');
					}
					$(this).html('Verify').attr('disabled', false);					
				}
			});
		}
	});
	
	$("#btn-twitter-verify").click(function() {
		window.location.href = "/Twitter-API-Login-PHP-master/index.php";
	});
	
	<?php if( isset($_GET['msg']) && $_GET['msg'] == 'twitter_success' ) { ?>
		$(document).ready(function() {
			toastr.success("Your Twitter account verified successfully!");
		});
	<?php } elseif( isset($_GET['msg']) && $_GET['msg'] == 'twitter_error' ) { ?>
		$(document).ready(function() {
			toastr.error("Please verify Twitter account with our site registered email id.");
		});
	<?php } ?>
	
	
	$("#btn-google-verify").click(function() {
		window.location.href = "/google-login-btn.php";
	});
	
	<?php if( isset($_GET['msg']) && $_GET['msg'] == 'google_success' ) { ?>
		$(document).ready(function() {
			toastr.success("Your Google account verified successfully!");
		});
	<?php } elseif( isset($_GET['msg']) && $_GET['msg'] == 'google_error' ) { ?>
		$(document).ready(function() {
			toastr.error("Please verify Google account with our site registered email id.");
		});
	<?php } ?>
	
</script>