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

{% set active_page ='products' %}

{% block pagehead %}
<title>add product</title>
{% endblock %}

{% block content %}
  {% include 'prods/nav.html' %}
  <br>

<script type="text/javascript">
$(function() {
    // pos
    //$.getJSON( "http://localhost:5000/product/erlang", function( data ) {console.log(data[0]['barcode']);})
    $('#barcode').on('input', function() {
        $.getJSON( "/prods/check/"+$("#barcode").val(), function( data ) {
            $("#check").html("<i class='fa fa-list-alt'></i>");
            if (data['exists'] === true){
              $("#check").html("<i style='color:red;' class='fas fa-exclamation-triangle'></i>");
            }
        })
    });
  });
</script>
{% if has_product == 'True' %}
  
  <div class="alert alert-danger" role="alert">
    Product alreadly Listed
  </div>
{% endif %}

  <h2>Add product for 
      <span class="badge badge-primary">{{SECTION_NAME}}</span>
      <span class="badge badge-secondary">{{category}}</span>
  </h2>
  <br>

<form action="/prods/add/{{category}}" method="post">

  <label>barcode (required)</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="check"><i class="fa fa-list-alt"></i></span>
    </div>
    <input required 
      name="barcode" autocomplete="off" id="barcode" type="text" class="form-control" 
      placeholder="Barcode" value="{{barcodestr}}">
  </div>

  <label>name (required)</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input required 
        name="name" autocomplete="off" id="name" type="text" class="form-control" 
        placeholder="Product Name">
  </div>

  <label>description</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input 
        name="description" autocomplete="off" id="description" type="text" class="form-control" 
        placeholder="Product Description">
  </div>

  <label>date</label>
  <div class="input-group mb-3">
      <div class="input-group-prepend">
          <span class="input-group-text"><i class="fa fa-calendar-day"></i></span>
      </div>
      <input 
          name="date" id="noHistoricDates"autocomplete="off" id="date" type="date" 
          class="form-control" min="" placeholder="">
  </div>

  <label>price</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input 
        name="price" autocomplete="off" id="price" type="number" step="0.01" class="form-control" 
        placeholder="Price">
  </div>

  <label>selling price</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input
        name="selling_price" autocomplete="off" id="selling_price" type="number" step="0.01"
        class="form-control" placeholder="Selling Price">
  </div>

  <label>in stock (required)</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input required
        name="in_stock" autocomplete="off" id="stock" type="number" step="1" class="form-control" 
        placeholder="Stock">
  </div>

  <label>discontinued</label>
  <div class="form-check">
    <input required
      name="discontinued" autocomplete="off" class="form-check-input" type="radio" value="True"
      id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Yes
    </label>
    <br>
    <input required
      name="discontinued" autocomplete="off" class="form-check-input" type="radio" value="False"
      id="defaultCheck1" checked="checked">
    <label class="form-check-label" for="defaultCheck2">
      No
    </label>
  </div>
  <br>

  <input 
    type="hidden" autocomplete="off" id="category" class="form-control" 
    name="category" placeholder="category" value="{{category}}">

  <input required  type="submit" class="btn btn-info" value="add">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

  <script>
  // Limit appointment date selections to current date and the future.
  // Format is yyyy-mm-dd according to section 2.4.5.2 of the W3C HTML 5.2 spec:
  // https://www.w3.org/TR/html52/infrastructure.html#valid-date-string
  /*(function() {
      document.getElementById("noHistoricDates").setAttribute("min", new Date().toISOString().split("T")[0]);
  })();*/
  </script>

</form>
{% endblock %}