{% extends 'header.html' %}

{% block css %}
<link rel='stylesheet' href='/static/css/tienda.css'>
{% endblock %}

{% block body %}
<div class='container-fluid'>
  <div class='row'>

    <div class='col-3'></div>
    <div class=col-6 style=' background-color: rgba(219, 226,230, 0.6);'>

      <form action='/addItem' method='POST' enctype="multipart/form-data"><br>
        Nombre: <input type="text" name='nombre' class="form-control" placeholder="Nombre de {{link}}">
        <div class='form-row align-items-center'>
          <div class='col-6'>
            Categoría:
            <select class="form-control" id="selectCat" onchange='change("selectCat")' name='categoria'>
              {% for categoria in categorias %}
              <option value={{categoria.categoria}}>{{categoria.categoria}}</option>
              {% endfor %}
              <option value='0'>Nueva categoría</option>

            </select>
          </div>
          <div class='col-6'>
            Precio:
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">$</div>
              </div>
              <input type="text" class="form-control" id="inlineFormInputGroupUsername2" name='Precio'
                placeholder="Precio">
            </div>
          </div>
        </div>
        <div id='categoria'>
          Nueva Categoría : <input type='text' name='nuevaCategoria' class='form-control' id='nuevaCategoria'>
        </div>
        Descripción: <textarea class="form-control" name='descripcion' rows="5" id="comment"></textarea>
        Imagen:
        <div class="custom-file">
          <input type="file" class="custom-file-input" name='imagen' id="imagen" lang="en"
            onchange='changePlaceHolder()'>
          <label class="custom-file-label" id='placeholder' for="customFileLang">Choose file</label>
        </div>
        Tipo de Item:
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tipoDeItem" id="exampleRadios1" value="0">
          <label class="form-check-label" for="exampleRadios1">
            Comida
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tipoDeItem" id="exampleRadios2" value="1">
          <label class="form-check-label" for="exampleRadios2">
            Bebida
          </label>
        </div>

        <button type='submit' class='btn btn-primary'>Someter</button>


      </form>
    </div>
  </div>
</div>
<script>

  $(document).ready(function () {
    $('#categoria').hide()
  });
  function change(string) {
    if ($('#' + string).val() == 0) {
      $('#categoria').show();
    }
    else {
      $('#categoria').hide();
    }

  }
  function changePlaceHolder() {
    var val = $('#imagen').val();
    $('#placeholder').html(val);
  }

</script>
{% endblock %}