{% extends "base/main_base.html" %}

{% set active_page ='pos' %}

{% block pagehead %}
<link rel="stylesheet" type="text/css" href="/static/css/b4vtabs.min.css">
<style type="text/css">
  #checkout-panel{
    min-height: 300px;
    max-height: 300px;
    overflow-y: scroll;
  }

  .product-item{
    cursor: pointer;
    user-select: none;
  }
</style>
{% endblock %}

{% block content %}

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">Total $<span id='checkout-total'>0</span></span>
        <span class="badge badge-secondary badge-pill"><span id="checkout-item-count">0</span></span>

      </h4>
      <div id="checkout-panel" class="list-group">
          
      </div>
      <div>
        <label for="user-change">User Change</label>
        <input type="number" id="user-change" type="" class="form-control" name="">
        <p>Return $<span id="change-return">---</span></p>
        <p class="d-flex justify-content-between align-items-center mb-3">
          <button id="calculate-change" class="btn btn-primary">Calculate</button>
          <button id="confirm-transaction" class="btn btn-success">Confirm</button>
        </p>
        
      </div>
    </div>
    <div class="col-sm-9">
      <div>
        <div class="row">
          <ul class="nav nav-tabs left-tabs">
            {%for category in categories%}
            <li class="nav-item">
              <a class="nav-link 
              {{'active' if loop.index==1}}" href="#tab-panel-{{category.id}}" data-toggle="tab">{{category.name}}</a>
            </li>
            {%endfor%}
            <!-- use the title attribute to show a tooltip with the full long name
                   in case the tab is trucated-->
            <!--
            <li class="nav-item">
              
              <a
                class="nav-link"
                href="#tab-panel-3"
                title="More Description Here"
                data-toggle="tab"
                >Tab 3</a
              >
            </li>-->
          </ul>

          <div class="tab-content">
            {%for category in categories%}
            <article class="tab-pane container 
            {{'active' if loop.index==1}}" id="tab-panel-{{category.id}}">
              {%for product in category.products%}
                <p class="product-item" id="product_{{product.barcode}}">{{product.name}} - {{product.selling_price}}</p><span class="badge badge-secondary">{{product.in_stock}}</span>
              {%endfor%}
            </article>
            {%endfor%}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  function checkout_item(id, name, price){
    return `<li product-id="checkout_${id}" class="checkout-item close-parent list-group-item d-flex justify-content-between lh-condensed">
              <div>
                <h6 class="my-0" class="checkout-item-name">${name}</h6>
                <small class="text-muted"></small>
              </div>
              <span class="text-muted ">$<span class="checkout-item-price">${price}</span></span>
              <button type="button" class="close close-but" aria-label="Close" >
                <span aria-hidden="true">&times;</span>
              </button>
    </li>`
  }
  function update_checkout() {

    // price
    var total = 0;
    var item_count = 0;
    $( ".checkout-item" ).each(function( i , obj) {
      var price = $(this).find('.checkout-item-price').text();
      var price_s = String(price).trim().trim('$');
      total += int(price_s); item_count += 1;
    });
    $('#checkout-total').text(total);
    $('#checkout-item-count').text(item_count);

  }
  $(document).ready(function(){


    $('.product-item').click(function(){
      var id = $(this).attr('id');
      var name = encodeURI($(this).text().split('-')[0].trim());
      var price = encodeURI($(this).text().split('-')[1].trim());

      $('#checkout-panel').append(checkout_item(id, name, price));
      update_checkout();
    });

    $('#calculate-change').click(function(){
      var user_change = int($('#user-change').val().trim());
      var total = int($('#checkout-total').text().trim());
      if (user_change > total){
        $('#change-return').text(user_change-total);
      }
    });

    $('#confirm-transaction').click(function(){
      var items = {};
      $( ".checkout-item" ).each(function( i , obj) {
        var id = $(this).attr('product-id').split('_')[2];
        if (!(id in items)){
          items[id] = {'count': 1}
        }else
        if (id in items){
           items[id]['count'] += 1;
        }
      });

      var json_submit = items;
      $.ajax({
          type: "POST",
          url: "{{url_for('pos.transaction')}}",
          // The key needs to match your method's input parameter (case-sensitive).
          data: JSON.stringify(json_submit),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(data){
              // alert(data);
              window.location.reload();
              return false;
          },
          failure: function(errMsg) {
              alert(errMsg);
          },
          beforeSend: function(xhr, settings) {
              if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                  xhr.setRequestHeader("X-CSRFToken", "{{csrf_token()}}")
              }
          }
      });
    });





    $(document).on("click", ".close" , function() {
      $(this).closest('.close-parent').remove();
      update_checkout();
    });
  });
</script>
{% endblock %}