{{define "header_additions"}}
    <script src="https://js.stripe.com/v3/"></script>
{{end}}
{{define "body_content"}}
{{ if ne .UserName "" }}

<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Einstellungen</p>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
      <div class="field"> <label id="label" class="label">Bezeichnung</label>
        <div class="control has-icons-right">
          <input id="alias" class="input" type="text" maxlength="16">
          <span id="alias_exclamation" class="icon is-small is-right">
            <i class="fas fa-exclamation-triangle"></i>
          </span>
        </div>
        <p id="alias_errormsg" class="help is-danger"></p>
      </div>

      <div class="field">
        <div class="control">
        <label class="checkbox">
          <input id="checkbox" type="checkbox">
           SMS Alarmierung aktiv
        </label>
        </div>
      </div>

      <div class="field">
        <label class="label">Alarmnummer (SMS)</label>
        <div class="control has-icons-right">
          <input id="smsnumber" class="input" type="text" maxlength="16"> <span id="smsnumber_exclamation" class="icon is-small is-right">
            <i class="fas fa-exclamation-triangle"></i>
          </span>
        </div>
        <p id="smsnumber_errormsg" class="help is-danger"></p>
      </div>
      
      <div class="is-size-7">
Device ID: <span id="deveui"></span>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button id="modal-save" class="button is-success">OK</button>
      <button id="modal-close" class="button">Cancel</button>
    </footer>
  </div>
</div>

<div id="cart" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Abo verl&auml;ngern</p>
    </header>
    <p id="charge_data" hidden>0</p>
    <section class="modal-card-body">
      <div id="abos_verlaengern">
        <!-- Content ... -->
      </div>
      <div>
        <div class="has-margin-top-20" id="card-element">
          <!-- Elements will create input elements here -->
        </div>
        
        <!-- We'll put the error messages in this element -->
        <div id="card-errors" role="alert"></div>
      </div>
    </section>
    <footer class="modal-card-foot">

      <button id="cart-pay" class="button is-success">Bezahlen</button>
      <button id="cart-close" class="button">Cancel</button>
    </footer>
  </div>
</div>

{{range .LastMetrics}}
<div class="column waage is-full notification is-warning">
  <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span><a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a></p>
  <p id="alarmactive_{{.Deveui}}" hidden>{{.Alarmactive}}</p>
  <p id="smsnumber_{{.Deveui}}" hidden>{{.Smsnumber}}</p>
  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
  <div id="{{.Deveui}}">
    <div class="column is-full notification is-warning">
      <nav class="level">
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
          <div>
            <p class="icon"><i class="fa fa-thermometer-half"></i></p>
            <p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
          <div>
            <p class="icon"><i class="fa fa-tint"></i></p>
            <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=w">
          <div>
            <p class="icon"><i class="fa fa-balance-scale"></i></p>
            <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight_kg}} kg</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
          <div>
            <p class="icon"><i class="fa fa-cloud"></i></p>
            <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
          <div>
            <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
            <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>
          </div>
        </a>
      </div>
      </nav>
    </div>
    <div class="has-text-centered">
      <span class="is-size-6 has-text-centered">aktiv bis</span>
      <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
    </div>
{{ if (lt .DaysUntilDeactivated 1095) }}
    <div class="has-text-centered is-size-7">
      <p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}">&nbsp;</p>
    </div>
    <div class="has-text-centered">
      <p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
      <a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-lg fa-plus"></i>
        </span>
      </a>
      <a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-2x fa-shopping-cart"></i>
        </span>
      </a>
      <a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-lg fa-minus"></i>
        </span>
      </a>
    </div>
{{ end }}
  </div>
</div>

{{end}}

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>

<script>

function validate(what, text) {
  if (what == 'alias') {
    var re = /^[a-zA-Z0-9 ]{1,16}$/;
  } else if (what == 'smsnumber') {
    var re = /^\+[0-9]{11,11}$/;
  }
  return re.test(text);
}

// A $( document ).ready() block.
$( document ).ready(function() {
$(".show-modal").click(function() {
  $("#alias_exclamation").hide();
  $("#smsnumber_exclamation").hide();
  var alias = $(this).prev().html();
  var deveui = $(this).prev().attr('id').replace("alias_","");
  $('#deveui').html(deveui);
  var alarmactive = $('#alarmactive_'+deveui).html();
  var smsnumber = $('#smsnumber_'+deveui).html();
  
  $("#alias").val(alias);
  console.log(alarmactive);
  if (alarmactive == "1") {
    $('#checkbox').prop('checked', true);
  } else {
    $('#checkbox').prop('checked', false);
  }
  $("#smsnumber").val(smsnumber);
  $("#modal").addClass("is-active");  
});

$("#cart-close").click(function() {
   $("#cart").removeClass("is-active");
});

$(".abo_plus").click(function() {
   console.log("abo_plus");
   el = $(this).parent().find(".abo_add_years");
   el_text = $(this).parent().parent().find(".abo_add_years_text");
   counter = Number(el.html());
   if (counter < 3) {
     counter = counter + 1;
     el.html(counter);
     if (counter == 1) {
       el_text.html("+" + counter + " Jahr");
     } else {
       el_text.html("+" + counter + " Jahre");
     }
   }
});

$(".abo_minus").click(function() {
   console.log("abo_minus");
   el = $(this).parent().find(".abo_add_years");
   el_text = $(this).parent().parent().find(".abo_add_years_text");
   counter = Number(el.html());
   if (counter > 0) {
     counter = counter - 1;
     el.html(counter);
     if (counter == 0) {
       el_text.html("&nbsp;");
     } else if (counter == 1) {
       el_text.html("+" + counter + " Jahr");
     } else {
       el_text.html("+" + counter + " Jahre");
     }
   }
});

function add_years(dt,n) 
{
 return new Date(dt.setFullYear(dt.getFullYear() + n));      
}

$(".abo_pay").click(function() {
  console.log("pay...");
  counter = 0; 
  charge_data = '';
  abo_table = '<table class="table is-bordered is-fullwidth" >';
  abo_table += '<tr><th class="is-2">Alias</th><th>verl&auml;ngern bis</th><th class="has-text-right">Betrag</th></tr>';
  $(".waage").each(function( index ) {
    console.log( index + ": " + $( this ).find(".alias").html() );
    this_count = Number($( this ).find(".abo_add_years").html());
    if (this_count > 0) {
      counter += this_count;
      this_date = $( this ).find(".paid_until").html();
      abo_table += '<tr><td>' + $( this ).find('.alias').html() + '</td><td>' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '</td><td class="has-text-right">' + (this_count * 24).toFixed(2) + '</td></tr>';
      if (charge_data == '') {
        charge_data = $( this ).find("div").first().attr('id') + ":" + this_count;
      } else {
        charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count;
      }
    }
    console.log( counter );
  });
  abo_table += '<tr><td>Total CHF</td><td></td><td class="has-text-right">' + (counter * 24).toFixed(2) + '</td></tr>';
  console.log("Counter: "+counter);
  abo_table += "</table>";
  if (counter > 0) {
    console.log(abo_table);
    console.log("charge_data: "+charge_data);
    $("#abos_verlaengern").html(abo_table);
    $("#charge_data").html(charge_data);
    $("#cart").addClass("is-active");  
  }
});

$("#modal-close").click(function() {
   console.log("blabla");
   $("#modal").removeClass("is-active");
});

$("#modal-save").click(function() {
  var alarmactive = "0";
  if ($('#checkbox').prop('checked')) {
    alarmactive = "1";
  }

  // Validation Code
  var is_valid = true;
  if (!validate('alias',$('#alias').val())) {
     $('#alias_errormsg').html('Ung&uuml;ltige Bezeichnung; erlaubte Zeichen A-Z, 0-9 und Leerschlag');
     $("#alias").addClass("is-danger");  
     $("#alias_exclamation").show();
     is_valid = false;
  } else {
     $('#alias_errormsg').html('');
     $("#alias").removeClass("is-danger");  
     $("#alias_exclamation").hide();
  }

  if (!validate('smsnumber',$('#smsnumber').val())) {
     $('#smsnumber_errormsg').html('Beispiel einer g&uuml;ltigen SMS Nummer: +41761234567');
     $("#smsnumber").addClass("is-danger");  
     $("#smsnumber_exclamation").show();
     is_valid = false;
  } else {
     $('#smsnumber_errormsg').html('');
     $("#smsnumber").removeClass("is-danger");  
     $("#smsnumber_exclamation").hide();
  }

  if (!(is_valid)) {
    return;
  }

  $.ajax({
    url: "save_scale_settings",
    type: "get", //send it through get method
    dataType: "json",
    data: { 
      deveui: $('#deveui').html(), 
      alias: $('#alias').val(),
      smsnumber: $("#smsnumber").val(), 
      alarmactive: alarmactive
    },
    success: function(response) {
      console.log('save success');
      if (response.rc == 0) {
         $('#alias_'+$('#deveui').html()).html($('#alias').val());
         var alarmactive = "0";
         if ($('#checkbox').prop('checked')) {
           alarmactive = "1";
         }
         $('#alarmactive_'+$('#deveui').html()).html(alarmactive);
         $('#smsnumber_'+$('#deveui').html()).html($('#smsnumber').val());
      }
    },
    error: function(xhr) {
      console.log('save error');
      //Do Something to handle error
    }
  });

  console.log("save");
  $("#modal").removeClass("is-active");
});

});

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
var elements = stripe.elements();

// Set up Stripe.js and Elements to use in checkout form
var style = {
  base: {
    color: "#32325d",
  }
};

var card = elements.create("card", { style: style });
card.mount("#card-element");


card.addEventListener('change', ({error}) => {
  const displayError = document.getElementById('card-errors');
  if (error) {
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
  }
});


function GetClientSecret() {
  var result = "";
  $.ajax({
    async: false,
    url: "getstripepaymentintent",
    type: "get", //send it through get method
    dataType: "json",
    data: { 
      charge_data: $("#charge_data").html()
    },
    success: function(response) {
      console.log('pay success');
      console.log(response.stripesessionid);
      console.log('rc: '+response.rc);
      if (response.rc == 0) {
        result = response.stripeclientsecret;
      }
    },
    error: function(xhr) {
      console.log('getstripepaymentintent error');
      //Do Something to handle error
    }
  });

  return result;
}

$('#cart-pay').on('click', function(ev) {
  var clientSecret = GetClientSecret();
  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: card,
      billing_details: {
        name: '{{ .UserName }}'
      }
    }
  }).then(function(result) {
    if (result.error) {
      // Show error to your customer (e.g., insufficient funds)
      console.log(result.error.message);
    } else {
      // The payment has been processed!
      if (result.paymentIntent.status === 'succeeded') {
        // Show a success message to your customer
        // There's a risk of the customer closing the window before callback
        // execution. Set up a webhook or plugin to listen for the
        // payment_intent.succeeded event that handles any business critical
        // post-payment actions.
        console.log("Payment succeeded!!!");
        $("#cart").removeClass("is-active");
      }
    }
  });
});
</script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}