{% extends "layout.html" %}
{% block container %}
<div class="spinner-border" role="status" style='display: none'>
  <span class="sr-only">Loading...</span>
</div>
          <div class="card" id="data-el-3">
            <div class="card-body ov-auto">
	      <h5 class="card-title">Google Identity Verification({{sg_status['google_identify_verification']['message']|safe}})</h5>
	      {% if sg_status['google_identify_verification']['status'] == False %}
	      <button id='get_code'>Get verification code</button>
              <div class="row" style="margin-top: 10px">
                <div class="col">
	  	  <input class="form-control" type="text" placeholder="Enter Your Verification Code Now" id="verification_code" name="verification_code">
		</div>
                <div class="col">
		  <button id='verify_code'>Enter</button>
                </div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Select Project ({{sg_status['project_id_html']|safe}})</h5>
	      {% if not 'project_id' in sg_status.keys() %}
	      <div class="row" style="margin-top: 5px">
                <div class="col">
			<input name="use_project" data-project="{{sg_status['current_project_id']}}" type="radio" value="1" checked>
		      Use Existing Project
		      <input name="use_project" data-project="tg-project-{{command_status['machine_id']}}" class="" style="margin-left: 10px" type="radio" value="0">
		      Create New project
	        </div>
	      </div>
	      <div class="row" style="margin-top: 5px">
		<div class="col">
		<input class="form-control" type="text" placeholder="Project ID" id="project_id" name="project_id" value="{{sg_status['current_project_id']}}">
		</div>
		<div class="col">
		<button id='create_project' class="d-none">Enter</button><button id='use_project'>Enter</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px">Enable Billing ({{sg_status['billing_account_html']|safe}})</h5>
	      {% if not 'billing_account' in sg_status.keys() %}
              <div class="row" style="margin-top: 10px">
	{% if command_status['billing_accounts']|length > 0 %}
            <div class="col">
                <select id='ba' name='ba'>
                    <option value="">Select billing account</option>
                    {% for ba in command_status['billing_accounts'] %}
                        <option value ="{{ba['name']}}">{{ba['displayName']}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col">
                <button id='enable_billing'>Enable Billing</button>
            </div>
        {% else %}
            <div class="col">
                <p>No billing accounts found. Please add a billing account.</p>
            </div>
            <div class="col">
                <button id='cancel_enable_billing'>Cancel</button>
                <button id='continue_enable_billing'>Continue</button>
            </div>
        {% endif %}
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Create Service Account ({{sg_status['service_account_html']|safe}})</h5>
	      {% if 'billing_account' in sg_status.keys() and sg_status['service_account']['status'] == False %}
	      <div class="row" style="margin-top: 5px">
		<div class="col">
		  <button id='create_service_account'>Create Service Account</button>
		</div>
	      </div>
	      {% else %}
	      {% if sg_status['service_account']['status'] == True and not 'grant_permission' in sg_status.keys() %}
	      <div class="row" style="margin-top: 5px">
		<div class="col">
		  <button id='grant_permissions'>Grant Permissions</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Grant Permissions: <span style="color: green"><b>Required permittions granted to the service account</b></span></h5>
	      {% if 'grant_permission' in sg_status.keys() and not 'agent_pool' in sg_status.keys() %}
	      <h5 class="card-title" style="margin-top: 25px"> Create a new agent pool</h5>
	      <div class="row" style="margin-top: 5px">
		<div class="col">
			<input class="form-control" type="text" placeholder="Enter Agent Pool Name" id="pool_name" name="pool_name" value="tg-pool-{{command_status['machine_id']}}">
		</div>
		<div class="col">
		  <button id='create_agent_pool'>Enter</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Agent Pool Name: <span style="color: green"><b>{{sg_status['agent_pool']}}</b></span></h5>
	      {% if 'agent_pool' in sg_status.keys() and not 'agent_installed' in sg_status.keys() %}
	      <div class="row" style="margin-top: 5px">
		<div class="col">
		  <button id='install_transfer_agent'>Install Transfer Agent</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Transfer Agent installation: <span style="color: green"><b>Installed</b></span></h5>
	      {% if not 'bucket_name' in sg_status.keys() %}
	      <h5 class="card-title" style="margin-top: 25px"> Create Bucket</h5>
	      <div class="row" style="margin-top: 5px">
		<div class="col">
			<input class="form-control" type="text" placeholder="Enter Bucket Name" id="bucket_name" name="bucket_name" value="tg-bucket-{{command_status['machine_id']}}">
		</div>
		<div class="col">
		  <button id='create_bucket'>Create</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Create Bucket ({{sg_status['bucket_name_html']|safe}})<a class="mx-1" target="_blank" href="https://console.cloud.google.com/storage/browser/{{sg_status['bucket_name']}};tab=objects?forceOnBucketsSortingFiltering=false&project={{sg_status['project_id']}}&supportedpurview=project&prefix=&forceOnObjectsSortingFiltering=false">Advanced setting</a></h5>
	      {% if False and sg_status['tg_type'] == 'TG-MYSQL' and not 'mysql_backup_pass' in sg_status.keys() %}
	      <h5 class="card-title" style="margin-top: 25px"> Create MySQL Backup User</h5>
	      <div class="row" style="margin-top: 5px">
		<div class="col">
			<input class="form-control" type="text" placeholder="Enter MySQL root password" id="mysql_root_pass" name="mysql_root_pass">
		</div>
		<div class="col">
		  <button id='create_mysql_backup_user'>Create</button>
		</div>
	      </div>
	      {% else %}
	      {% if False and sg_status['tg_type'] == 'TG-MYSQL' %}
	      <h5 class="card-title" style="margin-top: 25px"> Create MySQL Backup User: <span style="color: green"><b>Created</b></span></h5>
	      {% endif %}
	      {% if not 'transferjob' in sg_status.keys() %}
	      <h5 class="card-title" style="margin-top: 25px"> Create Transfer Job</h5>
	      <div class="row" style="margin-top: 5px">
		<div class="col">
			<input class="form-control" type="text" placeholder="Enter Transfer Job Name" id="transferjob_name" name="transferjob_name" value="tg-job-{{command_status['machine_id']}}">
		</div>
		<div class="col">
		  <button id='create_transferjob'>Create</button>
		</div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px"> Transfer Job: <span style="color: green"><b>(Current Transfer Job: {{sg_status['transferjob']}})</b></span><a class="px-1" target="_blank" href="https://console.cloud.google.com/transfer/jobs/{{sg_status['transferjob']|replace("/", "%2F")}}/runs?orgonly=true&project={{sg_status['project_id']}}&supportedpurview=project,organizationId,folder">Advanced setting</a></h5>
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
	      {% endif %}
            </div>
          </div>
	<script>
	$(function(){
		function replace_spinner(target) {
			$(target).hide();
			$(target).after('<div id="spinner" class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>');
		}

		function remove_spinner(target) {
			$(target).show();
			$('#spinner').remove();
		}

		function replace_check(target) {
			$(target).replaceWith('<i class="text-success fa fa-check"></i>');
		}

		$('#get_code').click(function() {
			replace_spinner(this);
			$.getJSON('/gcloud/get_vcode', function(data) {
				if (data['result'] == 'OK') {
					replace_check('#spinner');
					var win = window.open(data['url'],'_blank');
					win.focus();
				} else {
					remove_spinner(this);
					alert('Failed to get verification code');
				}
			});
		});
		$('#verify_code').click(function() {
			replace_spinner(this);
			json_data = {
				vcode: $('#verification_code').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/verify_vcode',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_project').click(function() {
			replace_spinner(this);
			json_data = {
				project_id: $('#project_id').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_project',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#use_project').click(function() {
			replace_spinner(this);
			json_data = {
				project_id: $('#project_id').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/use_project',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#enable_billing').click(function() {
			replace_spinner(this);
			json_data = {
				billing_account: $('#ba').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/enable_billing',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_service_account').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_service_account',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#grant_permissions').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/grant_permissions',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#install_transfer_agent').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/install_transfer_agent',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_resources').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_resources',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_topics').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_topics',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_subscriptions').click(function() {
			replace_spinner(this);
			json_data = {
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_subscriptions',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#go_to_create_resources').click(function() {
			$.getJSON('/gcloud/get_create_resources_url', function(data) {
				if (data['result'] == 'OK') {
					var win = window.open(data['url'],'_blank');
					win.focus();
				} else {
					alert('Failed to get create resources url');
				}
			});
		});
		$('#go_to_create_bucket').click(function() {
			$.getJSON('/gcloud/get_create_bucket_url', function(data) {
				if (data['result'] == 'OK') {
					var win = window.open(data['url'],'_blank');
					win.focus();
				} else {
					alert('Failed to get create resources url');
				}
			});
		});
		$('#save_bucket_name').click(function() {
			replace_spinner(this);
			json_data = {
				bucket_name: $('#bucket_name').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/save_bucket_name',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_bucket').click(function() {
			replace_spinner(this);
			json_data = {
				bucket_name: $('#bucket_name').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_bucket',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_mysql_backup_user').click(function() {
			replace_spinner(this);
			json_data = {
				mysql_root_pass: $('#mysql_root_pass').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_mysql_backup_user',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_agent_pool').click(function() {
			replace_spinner(this);
			json_data = {
				pool_name: $('#pool_name').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_agent_pool',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#create_transferjob').click(function() {
			replace_spinner(this);
			json_data = {
				transferjob_name: $('#transferjob_name').val()
			};
			$.ajax({
				type: 'post',
				url: '/gcloud/create_transferjob',
				data: JSON.stringify(json_data),
				contentType: 'application/json',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#start_transferjob').click(function() {
			replace_spinner(this);
			$.ajax({
				type: 'get',
				url: '/gcloud/start_transferjob',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('#stop_transferjob').click(function() {
			replace_spinner(this);
			$.ajax({
				type: 'get',
				url: '/gcloud/stop_transferjob',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		});
		$('input[name="use_project"]').change(function(){
			$('#project_id').val($(this).data('project'));
			if ($(this).val() == 1) {
				$('#use_project').removeClass('d-none');
				$('#create_project').addClass('d-none');
			} else {
				$('#use_project').addClass('d-none');
				$('#create_project').removeClass('d-none');
			}
		});
		$('#cancel_enable_billing').click(function() {
			replace_spinner(this);
			if (confirm('Do you sure?')) {
				$.ajax({
					type: 'delete',
					url: '/gcloud/cancel_enable_billing',
					dataType: 'json',
					success: function(data) {
						alert(data['message']);
						location.reload(true);
					},
					error: function() {
						alert('Server Error');
						location.reload(true);
					}
				});
			}
		});
		$('#continue_enable_billing').click(function() {
			replace_spinner(this);
			if (confirm('Do you want to check biling account again?')) {
				location.reload(true);
			}
		});
	});
	</script>
{% endblock %}