<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Qora Web Server">
        <link rel="shortcut icon" href="favicon.ico">
        <title>Qora Web</title>
        <link href="/index/libs/bootstrap/3/css/theme.css" rel="stylesheet">
        <link href="/index/libs/css/style.css" rel="stylesheet">
        <link href="/index/libs/css/sidebar.css" rel="stylesheet">
        <style type="text/css">
          body {
          padding-top: 50px;
          }
          .sub-header {
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
          }
          .navbar-fixed-top {
          border: 0;
          z-index: 9999;
          }
          .sidebar {
          display: none;
          }
          @media (min-width: 768px) {
          .sidebar {
          position: fixed;
          top: 51px;
          bottom: 0;
          left: 0;
          z-index: 1000;
          display: block;
          padding: 20px;
          overflow-x: hidden;
          overflow-y: auto;
          background-color: #f5f5f5;
          border-right: 1px solid #eee;
          }
          }
          .nav-sidebar {
          margin-right: -21px;
          margin-bottom: 20px;
          margin-left: -20px;
          }
          .nav-sidebar > li > a {
          padding-right: 20px;
          padding-left: 20px;
          }
          .nav-sidebar > .active > a,
          .nav-sidebar > .active > a:hover,
          .nav-sidebar > .active > a:focus {
          color: #fff;
          background-color: #428bca;
          }
          .main {
          padding-top: 40px;
          }
          .main-tabs {
          width: 100%;
          padding-top: 15px;
          padding-left: 0px;
          padding-right: 0px;
          background-color: lightgray;
          display: none;
          }
          img.logo-header {
          background-color: transparent;
          height: 100%;
          }
          .col-lg-8 {
          padding-left: 0px;
          }
          @media (min-width: 768px) {
          .main {
          padding-right: 40px;
          }
          }
          .main .page-header {
          margin-top: 0;
          }
          .placeholders {
          margin-bottom: 30px;
          text-align: center;
          }
          .placeholders h4 {
          margin-bottom: 0;
          }
          .placeholder {
          margin-bottom: 20px;
          }
          .placeholder img {
          display: inline-block;
          border-radius: 50%;
          }
          .r-t {
          margin: 0px;
          }
          .r-l {
          margin: 0px;
          }
          span.label.label-default {
          background-color: #fff;
          color: lightgray;
          font-size: 90%;
          line-height: 1;
          }
          span.label.label-default a {
          color: #ddd;
          text-decoration: none;
          }
          a.r-l:hover,
          a.r-l:focus {
          color: #6467FF;
          text-decoration: none;
          }
          .navbar-header {
          width: 110px;
          }
          .col-centered {
          float: none;
          margin: 0 auto;
          padding: 30px;
          /*box-shadow: 0px 1px 1px 1px #ddd;*/
          border: 1px solid #ddd;
          position: relative;
          -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
          }
        </style>
      </head>
      <body>
        {{navbar}}
        <div class="container">
          <div class="row">
            <div class="main">
              <div class="col-lg-8 col-centered">
            <div class="form-horizontal">
              <!-- <fieldset> -->
                <legend>Send Money</legend>
    			<div id=result></div>
                	{{result}}
                <div class="form-group">
                  <label for="select-name" class="col-lg-2 control-label">Sender</label>
                  <div class="col-lg-10">
                    <select class="form-control" id="select-name">
                      {% for name in controller.getNames("true") %}
    					<option value={{name.getOwner()}}>
    						{{name.getNameBalanceString()}}</option>
    					{% endfor %}
                    </select>
                  </div>
                <label for="To" class="col-lg-2 control-label">To</label>
                <div class="col-lg-10">
                  <input id="to" type="text" placeholder="name or address" class="form-control">
                </div>
                <label for="Amount" class="col-lg-2 control-label">Amount</label>
                <div class="col-lg-10">
                  <input id="amount" type="text" placeholder="amount" class="form-control">
                </div>
                <label for="Fee" class="col-lg-2 control-label">Fee</label>
                <div class="col-lg-10">
                  <input id="fee" type="text" placeholder="fee" class="form-control">
                </div>
              <!-- </fieldset> -->
            </div>
            <div class="form-group">
                  <div class="col-lg-10 col-lg-offset-2">
                    <button type="reset" id="btncancel" onclick="javascript:reload()" class="btn btn-default">Cancel</button>
                	 <button type="submit" id="btnsubmit" onclick="javascript:updateValue()" class="btn btn-primary pull-right">Submit</button>
                  </div>
                </div>
          </div>
          </div>
          </div>
        </div>
        <script src="/index/libs/jquery/jquery.2.js"></script>
        <script src="/index/libs/bootstrap/3/js/bootstrap.min.js"></script>
        <script src="/index/libs/angular/angular.1.4.js"></script>
        <script src="/index/libs/js/sidebar.js"></script>
        <script type="text/javascript">
    
        var updateValue;
        updateValue = function() {
    
    	document.getElementById('result').innerHTML = '<div class=\"alert alert-info\" role=\"alert\">Saving...<br></div>';
    
    	var jsonstring = { "sender":  document.getElementById('select-name').value, "recipient": document.getElementById('to').value ,"amount": document.getElementById('amount').value, "fee": document.getElementById('amount').value };
    	
    		$.post(
    			"/index/api.html",
    			{
    				type: 'post',
    				apiurl: '/namepayment',
    				json: JSON.stringify(jsonstring)
    			})
    			.done( function(data) {
    				if (data.type == 'success')
    				{
    					document.getElementById('result').innerHTML = "<div class=\"alert alert-success\" role=\"alert\">Payment successful.<br></div>";
    				}
    				else if(data.type == 'apicallerror')
    				{
    					document.getElementById('result').innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">ERROR<br>"+data.errordetail+"<br></div>";
    				}
    				else if (data.type == 'error')
    				{
    					try {
    						var error = JSON.parse(data.error);
    						message = error.message;
    					} catch (e) {
    						message = data.error;
    					}
    
    					document.getElementById('result').innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">An error occurred while submitting the payment.<br>"+message+"<br></div>";
    				}
    				else
    				{
    					document.getElementById('result').innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Unknown response:<br>"+data+"<br></div>";
    				}
    			})
    			.fail( function(xhr, textStatus, errorThrown) {
    				document.getElementById('result').innerHTML = '<div class=\"alert alert-danger\" role=\"alert\">ERROR<br>'+xhr.responseText+'<br></div>';
    			});
    	
    	
    	
    	
    		document.getElementById('result').innerHTML = '<div class=\"alert alert-info\" role=\"alert\">Sending...<br></div>';
    
    
    		
    
    
        };
    
        $(document).ready(function() {
            var searchval;
     	{% autoescape true %}
    		var searchval
    		$('#name').change(function() {
                $('ul.nav-tabs > li:nth-child(1) > a').attr('href', '/index/main.html?search=' + $('#name').val());
                $('ul.nav-tabs > li:nth-child(2) > a').attr('href', '/index/blogsearch.html?search=' + $('#name').val());
            });
    		  $('#name').val(getSearchParameters().search);
            if (getSearchParameters().search === void 0) {
                $('#name').val('');
            }
            $('#name').bind('oninput', function() {
                $('#name').val(this);
            });
    
            $('#button').click(function() {
                var url;
                url = void 0;
                searchval = $('#name').val();
                document.location.href = '/index/main.html?search=' + searchval;
            });
    
            $('#button').click(function() {
                var url;
                url = void 0;
                searchval = $('#name').val();
                document.location.href = '/index/main.html?search=' + searchval;
            });
            $('#name').keypress(function(e) {
                if (e.which === 13) {
                    $('#button').trigger('click');
                }
            });
    		 $('ul.nav-tabs > li:nth-child(1) > a').attr('href', '/index/main.html?search=' + $('#name').val());
            	$('ul.nav-tabs > li:nth-child(2) > a').attr('href', '/index/blogsearch.html?search=' + $('#name').val());
        });
        {% endautoescape %}
    
    	function Add(){
    		AddValue("");
    	};
    
        </script>
        <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        myApp.controller('AppController', function($scope) {
            $scope.steps = {};
        });
        </script>
      </body>
    </html>