{% extends "layout.html" %}
{% block container %}
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
		    <h5 class="card-title">Google Transfer Agent Status({{sg_status['agent_msg']|safe}})</h5>
              <div class="row" style="margin-top: 10px">
	      {% if sg_status['docker_status'] == False %}
              <form id="upload_form" action="/data/upload/install-docker" method="post">
	      {% else %}
              <form id="upload_form" action="/data/upload/agent" method="post">
	        {% if sg_status['agent_status'] == False %}
                <div class="col">
		      Project-ID: {{sg_status['project_id']}}
		</div>
	        {% else %}
	      <div class="col">
	      Project-ID: {{sg_status['project_id']}} Prefix: {{sg_status['prefix']}}
	      </div>
	        {% endif %}
	      {% endif %}
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input type="text" class="form-control" placeholder="{{ command_status['agent_status'] }}" readonly>
                <div class="input-group-append">
	      {% if sg_status['docker_status'] == False %}
                  <input type="submit" class="btn btn-dark text-white" value="Install agent">
	      {% else %}
	        {% if sg_status['agent_status'] == False %}
                  <input type="button" id="start_agent" class="btn btn-dark text-white" value="Start agent">
	        {% else %}
                  <input type="button" id="stop_agent" class="btn btn-dark text-white" value="Stop agent">
	        {% endif %}
	      {% endif %}
                </div>
              </div>
	      </form>
	    </div>
	  </div>
          <div class="card" id="data-el-4">
            <div id="data-transfer-job" class="card-body ov-auto">
	        <h5 class="card-title">Daily Backup: ({{sg_status['daily_backup_status']|safe}}) Transfer Job: ({{sg_status['transferjob_status']|safe}})</h5>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input id="mb-did" class="form-control" type="text" placeholder="Data Admin-ID"></div>
		<div class="col"><input id="mb-dmk" class="form-control" type="password" placeholder="DMK"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input type="text" class="form-control" placeholder="{{ command_status['backup_status'] }}" readonly>
                <div class="input-group-append">
		      <button id="mb-start" class="btn btn-secondary text-white">Backup now</button>
                </div>
                <div class="input-group-append">
			<button id="mb-toggle-daily" class="btn btn-dark text-white">{{command_status['daily_backup']}} daily backup</button>
                </div>
	      </div>
	    </div>
          </div>
<script>
$(function(){
	var auth = {};
	async function check_dmk(prefix) {
	  try {
	    const auth = { did: $('#' + prefix + 'did').val(), dmk: $('#' + prefix + 'dmk').val() };
	    const result = await $.ajax({
	      url: "/tgr/check_dmk",
	      type: "POST",
	      data: JSON.stringify(auth),
	      contentType: "application/json"
	    });
	    return result;
	  } catch (error) {
	    console.error("Error occurred:", error);
	    return { error: error };
	  }
	}

	$('#mb-start').click(async function(){
		showWaitingScreen();
		const res = await check_dmk('mb-');
		if (res['result'] == 'OK') {
			$.ajax({
				type: 'get',
				url: '/gcloud/start_mysql_backup',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			alert('Authentication...Failed.');
			hideWaitingScreen();
		}
	});
	$('#mb-toggle-daily').click(async function(){
		showWaitingScreen();
		const res = await check_dmk('mb-');
		if (res['result'] == 'OK') {
			$.ajax({
				type: 'get',
				url: '/gcloud/toggle_mysql_daily_backup',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			alert('Authentication...Failed.');
			hideWaitingScreen();
		}
	});
	$('#start_agent').click(async function(){
		showWaitingScreen();
		const res = await check_dmk('');
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/start_agent',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			alert('Authentication...Failed.');
			hideWaitingScreen();
		}
	});
	$('#stop_agent').click(async function(){
		showWaitingScreen();
		const res = await check_dmk('');
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/stop_agent',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			alert('Authentication...Failed.');
			hideWaitingScreen();
		}
	});
});
</script>
{% endblock %}