extends layout


block content
  .container
    h1 Welcome to the bank interface #{user}
    .card.shadow-lg
      .row 
        .col
          h2 Send Funds 
        .col
          h4 Balance: #{balance}
      hr
      .row 
        .col-4
          form(method='POST', action='/sendfunds')
            label Amount to Send:
            br
            input.form-control-lg.shadow(type="number" min="0" max=balance name="amount")
            br
            br
            label Reciever:
            br
            input.form-control-lg.shadow(name='name', type='text')
            br
            br
            label Your Password:
            br
            input.form-control-lg.shadow(name='senderpass', type='password')
            br
            br
            input.btn.btn-primary(type='submit', value='Submit')
        .col-8
          .card
          
            ul#transactions.nav.nav-tabs.card-header-tabs(role='tablist')
              li.nav-item
                a.nav-link.active.text-black(href='#transaction-list', role='tab', aria-controls='sent', aria-selected='true') Transaction List
              li.nav-item
                a.nav-link.text-black(href='#balhistory', role='tab', aria-controls='balhistory', aria-selected='false') Balance History
            .tab-content.mt-3
              #transaction-list.tab-pane.active(role='tabpanel')
                .logs
                  if transactionlog
                    each i in transactionlog
                      hr
                      p #{i}

              #balhistory.tab-pane(role='tabpanel', aria-labelledby='balhistory-tab')
                p Balance histroy is currently broken and we know this, please do not contact us about it, it is getting fixed 
                #chart_div(style="width:100%; height 100%")
                
    script(type='text/javascript' src='https://www.gstatic.com/charts/loader.js')
    script(type='text/javascript').
      google.charts.load('current', {packages: ['corechart', 'line']});
      google.charts.setOnLoadCallback(drawBasic);

      function drawBasic() {

            var data = google.visualization.arrayToDataTable([!{graphdata}]);


            var options = {
              hAxis: {
                title: 'Transactions'
              },
              vAxis: {
                title: 'Current Balance'
              },
              trendlines: {
                0: {type: 'exponential', color: '#333', opacity: .5},
                1: {type: 'linear', color: '#111', opacity: .3}
              },
          width: 680,
          height: 350,
        };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
          
          window.onload = resize;
          window.onresize = resize;   
          
          }
          
    
          
    
    
    
    
    script(type='text/javascript').
      function resize () {
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      var nav = document.querySelector('.nav-link');
      nav.addEventListener('click', function(e) {
        // Event delegation - make sure it was one of the tab nav items that was clicked
        if (e.target) {
            resize();
          // Call the redraw function for the charts
        }
      });
    br