{% extends "base.html" %}
 
{% block body %}
    <div class="wrapper">
      
      <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo"><b>LN</b>bits</a></a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>

          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <!-- Notifications: style can be found in dropdown.less -->
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-danger">!</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header"><b>Instant wallet, bookmark to save</b></li>
                  <li>
                  </li>
                </ul>
              </li>
            </ul>
          </div>


          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <li class="dropdown messages-menu">
       

       
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
 
  
          <!-- /.search form -->
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATIONs</li>
            <li class="active treeview">
              <a href="#">
                 <i class="fa fa-bitcoin"></i> <span>Wallets</span> 
                 <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">

               
              {% if len > 1 %}
              {%for i in range(0, len)%} 
               <li><a  href="wallet?wal={{ thearr[i][0] }}&usr={{ thearr[i][4] }}" ><i class="fa fa-bolt"></i> {{ thearr[i][3] }}</a></li>
              {%endfor%} 
              {% else %}
               <li><a  href="wallet?wal={{ thewal }}&usr={{ theid }}" ><i class="fa fa-bolt"></i> {{ walnme }}</a></li> 
              {% endif %}
  
                <li ><a   onclick="sidebarmake()">Add a wallet +</a></li>
                <div id="sidebarmake"></div>

              </ul>
            </li>
    
                  <li class="treeview">
              <a href="#">
                <i class="fa fa-th"></i> <span>Extensions</span> <small class="label pull-right bg-green">coming soon</small>
              </a>
            </li>
             </ul>
            
            
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Right side column. Contains the navbar and content of the page -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Wallet
            <small>Control panel <div id="wonga"></div></small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Wallets</li>
             <li href="wallet?wal={{thewal}}" class="active">{{ walnme }}</li>
          </ol>



        </section>

        <!-- Main content -->
        <section class="content">
          <!-- Small boxes (Stat box) -->
          <div class="row">
            <div class="col-md-6">
              <!-- small box -->
              <a href="#" class="small-box-footer">
              <div class="small-box bg-aqua">
                <div class="inner">
                  <h3><b>{{ walbal }} sats</b></h3>
                  <h3>{{ walnme }}</h3>
                </div>
                <div class="icon">
                  <i class="ion ion-flash"></i>
                </div>
                </a>
              </div>
            </div><!-- ./col -->
 
 




          </div><!-- /.row -->
          
           <div class="row">
        <div class="col-sm-3"> <button onclick="sendfundsinput()" class="btn btn-block btn-primary btn-lg">Send</button></div>
        <div class="col-sm-3"> <button onclick="receive()" class="btn btn-block btn-primary btn-lg">Receive</button></div>
      </div>

     

      <div id="receive"></div>
      <div id="sendfunds"></div>

        

      
      <div class="row">
      <div class="col-md-6">
              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">Transactions <b id="demo"></b></h3>
           
                </div><!-- /.box-header -->
                <div class="box-body no-padding">
                  <table id="pagnation" class="table table-bordered table-striped">

        <tr>
        <th>Memo</th>
        <th style='width: 20%'>date</th>
        <th style='width: 20%'>amount</th>
        </tr>
                    <tbody id="transactions">

                   

                  </tbody></table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div>
          </div>

          <div id="satschart"></div>

           

         <div class="row">
        <div class="col-md-6">
              <div class="box box-solid">
                <div class="box-header with-border">
                 
                </div><!-- /.box-header -->
                <div class="box-body">
                  <div class="box-group" id="accordion">
                    <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                    <div class="panel box box-primary">
                      <div class="box-header with-border">
                        <h4 class="box-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" aria-expanded="false">
                           Wallet "{{ walnme }}" API info 
                          </a>
                        </h4>
                      </div>
                      <div id="collapseThree" class="panel-collapse collapse" aria-expanded="false">
                        <div class="box-body"  style='word-wrap: break-word;'>
                          <b>Admin key: </b><i>{{ adminkey }}</i><br/>
                          <b>Invoice/Read key: </b><i>{{ inkey }}</i><br/>
                          Generate an invoice:<br/><code>POST /v1/invoices</code><br/>Header <code>{"Grpc-Metadata-macaroon": "<i>{{ inkey }}</i>"}</code><br/>
                          Body <code>{"value": "200","memo": "beer"} </code><br/>
                           Returns <code>{"pay_req": string,"pay_id": string} </code><br/>
                           *payment will not register in the wallet until the "check invoice" endpoint is used<br/><br/>

                          Check invoice:<br/>
                           Check an invoice:<br/><code>GET /v1/invoice/*payment_hash*</code><br/>Header <code>{"Grpc-Metadata-macaroon": "<i>{{ inkey }}</i>"}</code><br/>
                      
                           Returns <code>{"PAID": "TRUE"}/{"PAID": "FALSE"}  </code><br/>
                           *if using LNTXBOT return will hang until paid<br/><br/>
                        </div>
                      </div>
                    </div>


                    <div class="panel box box-danger">
                      <div class="box-header with-border">
                        <h4 class="box-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">
                            Delete wallet
                          </a>
                        </h4>
                      </div>
                      <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false">
                        <div class="box-body">

                        This whole wallet will be deleted, the funds will be UNRECOVERABLE <br/><br/><button class="btn btn-danger" onclick="deletewallet()">Delete wallet</button>
                        </div>
                      </div>

                    </div>

                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div>
          </div>

        </section><!-- /.content -->


       


      </div><!-- /.content-wrapper -->
      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>BETA</b>
        </div>
        <strong>Learn more about LNbits <a href="https://github.com/arcbtc/lnbits">https://github.com/arcbtc/lnbits</a>.</strong> 
      </footer>
    </div><!-- ./wrapper -->
    <link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}">  

<script>

  var inmacaroon = "{{ inkey }}";
var adminmacaroon = "{{ inkey }}";
var thehash = "";
var theinvoice = "";
var outamount = "";
var outmemo = "";


//API CALLS

function postAjax(url, data, thekey, success) {
  var params = typeof data == 'string' ? data : Object.keys(data).map(
  function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&');
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  xhr.open('POST', url);
  xhr.onreadystatechange = function() {
  if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
  };
  xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(params);
  return xhr;
}



function getAjax(url, thekey,success) {
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
  if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
  };
  xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send();
  return xhr;
}

function sendfundsinput(){
  document.getElementById("sendfunds").innerHTML = "<br/><br/><div class='row'><div class='col-md-4'>" +
           "<textarea id='pasteinvoice' class='form-control' rows='3' placeholder='Paste an invoice'></textarea></div></div>" +
           "<br/><div class='row'><div class='col-md-4'><button type='submit' onclick='sendfundspaste()' class='btn btn-primary'>" +
           "Submit</button><button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='scanQRsend()'>" +
           "Use camera to scan an invoice</button></div></div><br/><br/>";
  document.getElementById("receive").innerHTML = "";
}

function sendfundspaste(){
  invoice = document.getElementById("pasteinvoice").value;
  theinvoice =  decode(invoice);
  outmemo = theinvoice.data.tags[1].value;
       outamount = Number(theinvoice.human_readable_part.amount) /1000;
        if (outamount > Number("{{ walbal }}")){
          document.getElementById("sendfunds").innerHTML = "<div class='row'><div class='col-md-6'>"+
                    "<h3><b style='color:red;'>Not enough funds!</b></h3>" +
                    "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Continue</button>"+
                    "</br/></br/></div></div>";
        }
        else{
  document.getElementById("sendfunds").innerHTML = "<div class='row'><div class='col-md-6'>"+
                    "<h3><b>Invoice details</b></br/>Amount: " + outamount + "<br/>Memo: " + outmemo + "</h3>" +
                    "<h4 style='word-wrap: break-word;'>" + invoice + "</h4>"+
                    "<button type='submit' class='btn btn-primary' onclick='sendfunds(" + JSON.stringify(invoice) + ")'>Send funds</button>"+
                    "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel payment</button>"+
                    "</br/></br/></div></div>";
                  }
}



function receive() {
  document.getElementById("receive").innerHTML = "<br/><div class='row'><div id='QRCODE'>" +
          "<div class='col-sm-2'><input type='number' class='form-control' id='amount' placeholder='Amount' max='1000000' required></div>" +   
          "<div class='col-sm-2'><input type='text' class='form-control' id='memo' placeholder='Memo' required></div>" +  
          "<div class='col-sm-2'><input type='button' id='getinvoice' onclick='received()' class='btn btn-primary' value='Send Ajax request' /></div>" +
          "</div></div><br/>";
  document.getElementById("sendfunds").innerHTML = "";
}

function received(){
  memo = document.getElementById("memo").value;
  amount = document.getElementById("amount").value;
  postAjax('/v1/invoices', JSON.stringify({'value' : amount, 'memo' : memo}), '{{ inkey }}', function(data){ 
    theinvoice = JSON.parse(data).pay_req; 
    thehash = JSON.parse(data).payment_hash; 
    document.getElementById("QRCODE").innerHTML = "<div class='col-md-4'><div class='box'><div class='box-header'>" +
              "<center><a href='lightning:" + theinvoice + "'><div id='qrcode'></div></a>" +
              "<p style='word-wrap: break-word;'>" + theinvoice + "</p></div></div></div></center>";

    new QRCode(document.getElementById("qrcode"), {
      text: theinvoice,
      width: 300,
      height: 300,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.M
    });
    getAjax('/v1/invoice/'+ thehash,  '{{ inkey }}', function(datab){ 
      console.log(JSON.parse(datab).PAID);
      if (JSON.parse(datab).PAID == 'TRUE'){
        window.location.href = "wallet?wal=" + "{{thewal}}" + "&usr=" + "{{theid}}";
      }

    });
  });
}



function cancelsend(){
  window.location.href = "wallet?wal=" + "{{thewal}}" + "&usr=" + "{{theid}}";
}

function sendfunds(invoice){
  var url = '/v1/channels/transactions';
  postAjax(url, JSON.stringify({'payment_request' : invoice}), '{{ adminkey }}', function(data){ 
    thehash = JSON.parse(data).payment_hash; 
    console.log(JSON.parse(data));
      if (JSON.parse(data).PAID == 'TRUE'){
        window.location.href = "wallet?wal=" + "{{thewal}}" + "&usr=" + "{{theid}}";
      }
  });
}

function scanQRsend(){
  document.getElementById("sendfunds").innerHTML = "<br/><br/><div class='row'><div class='col-md-4'>" +
            "<div id='loadingMessage'>🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>" +
            "<canvas id='canvas' hidden></canvas><div id='output' hidden><div id='outputMessage'></div>" +
            "<br/><span id='outputData'></span></div></div></div><button type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel</button><br/><br/>";
  var video = document.createElement("video");
  var canvasElement = document.getElementById("canvas");
  var canvas = canvasElement.getContext("2d");
  var loadingMessage = document.getElementById("loadingMessage");
  var outputContainer = document.getElementById("output");
  var outputMessage = document.getElementById("outputMessage");
  var outputData = document.getElementById("outputData");
  function drawLine(begin, end, color) {
    canvas.beginPath();
    canvas.moveTo(begin.x, begin.y);
    canvas.lineTo(end.x, end.y);
    canvas.lineWidth = 4;
    canvas.strokeStyle = color;
    canvas.stroke();
  }
  // Use facingMode: environment to attemt to get the front camera on phones
  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
    video.srcObject = stream;
    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
    video.play();
    requestAnimationFrame(tick);
  });
  function tick() {
    loadingMessage.innerText = "⌛ Loading video..."
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
      loadingMessage.hidden = true;
      canvasElement.hidden = false;
      outputContainer.hidden = false;
      canvasElement.height = video.videoHeight;
      canvasElement.width = video.videoWidth;
      canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
      var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
      var code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
      });
      if (code) {
        drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
        drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
        drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
        drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
        outputMessage.hidden = true;
        outputData.parentElement.hidden = false;
        outputData.innerText = JSON.stringify(code.data);
        theinvoice =  decode(code.data);
        outmemo = theinvoice.data.tags[1].value;
        outamount = Number(theinvoice.human_readable_part.amount) /1000;
        if (outamount > Number("{{ walbal }}")){
          document.getElementById("sendfunds").innerHTML = "<div class='row'><div class='col-md-6'>"+
                    "<h3><b style='color:red;'>Not enough funds!</b></h3>" +
                    "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Continue</button>"+
                    "</br/></br/></div></div>";
        }
        else{


        document.getElementById("sendfunds").innerHTML = "<div class='row'><div class='col-md-6'>"+
                    "<h3><b>Invoice details</b></br/>Amount: " + outamount + "<br/>Memo: " + outmemo + "</h3>" +
                    "<h4 style='word-wrap: break-word;'>" + JSON.stringify(code.data) + "</h4>"+
                    "<button type='submit' class='btn btn-primary' onclick='sendfunds(" + JSON.stringify(code.data) + ")'>Send funds</button>"+
                    "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel payment</button>"+
                    "</br/></br/></div></div>";
                      }
      } 
      else {
        outputMessage.hidden = false;
        outputData.parentElement.hidden = true;
      }
    }
    requestAnimationFrame(tick);
  }
}













function deletewallet(){
  var urll = "deletewallet?wal={{ thewal }}&usr={{ theid }}";                     
  window.location.href = urll;
}


function sidebarmake(){
  document.getElementById("sidebarmake").innerHTML = "<li><div class='form-group'>"+
    "<input  style='width:70%;float:left;' type='text' class='form-control' id='walname' placeholder='Name wallet' required>" +   
    "<button style='width:30%;float:left;' type='button' class='btn btn-primary' onclick='newwallet()'>Submit</button>" +
    "</div></li><br/><br/>";
}

function makeid(length) {
  var result           = '';
  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for ( var i = 0; i < length; i++ ) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

function newwallet() {
  walname = document.getElementById("walname").value;
  window.location.href = "wallet?usr=" + "{{ theid }}" + "&wal=" + makeid(40) + "&nme=" + walname;
}









var trans = "{{ transactions }}";
var transac = trans.substr(1);


//console.log(trans);

if(transac != ""){
  var transactions = "";
  var linechart = [];
  var tran = transac.split("!");
  tran.shift();
    console.log(tran);
  for (var i = 0; i < tran.length; i++) {
    rects = tran[i].split(",");
    rectstime = String(rects[1]).split(".");
    var datime = convertTimestamp(rectstime[0])

    //Make the transactions table

    transactions += "<tr><td  style='width: 50%'>" + rects[0] + "</td><td>" + datime + "</td><td>" + rects[2] + "</td></tr>"; 

    //Make the line chart

    if (i == 0){
      linechart.push({y: datime, item1: rects[2]});
    }
    else{
      linechart.push({y: datime, item1: rects[3]});
    }
  }
  document.getElementById("transactions").innerHTML = transactions;
  if(linechart[0] != ""){
    document.getElementById("satschart").innerHTML =  "<div class='row'><div class='col-md-6'><div class='box box-info'><div class='box-header'>" +
                "<h3 class='box-title'>Spending</h3></div><div class='box-body chart-responsive'>" +
                "<div class='chart' id='line-chart' style='height: 300px;'></div></div></div></div></div>";
  }
}

console.log(linechart);
  var data = linechart
  var line = new Morris.Line({
  element: 'line-chart',
  resize: true,
  data,
  xkey: 'y',
  ykeys: ['item1'],
  labels: ['Item 1'],
  lineColors: ['#3c8dbc'],
  hideHover: 'auto'
});


function convertTimestamp(timestamp) {
  var d = new Date(timestamp * 1000), 
  yyyy = d.getFullYear(),
  mm = ('0' + (d.getMonth() + 1)).slice(-2), 
  dd = ('0' + d.getDate()).slice(-2),        
  hh = d.getHours(),
  h = hh,
  min = ('0' + d.getMinutes()).slice(-2),    
  ampm = 'AM',
  time;
  time = yyyy + '-' + mm + '-' + dd + ' ' + h + ':' + min;
  return time;
}

    </script>
{% endblock %}