{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% load static %}
{% load custom_tags %}


{% block content %}
<div class="row">
  <h3>Управління постачальниками</h3>
</div>
<div class="row">
  <a href="{% url 'management' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
  </a>
</div>
<div class="row">
    <div class="col xl6 s6 m1">
      <p class="form-title">Додати постачальника</p>
      <form id="add_new_vendor_form" autocomplete="off">
        
      <div class="row">
        <div class="input-field col m10 s12">
          <input id="vendor_name" name="vendor_name" type="text" class="validate" required>
          <label for="vendor_name">Назва</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m6 s12">
          <input id="location" name="location" type="text" class="validate">
          <label for="location">Адреса</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m2 s12">
          <input id="contact_email" name="contact_email" type="text" class="validate" >
          <label for="contact_email">Email</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_phone" name="contact_phone" type="text" class="validate" >
          <label for="contact_phone">Телефон</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_name" name="contact_name" type="text" class="validate" >
          <label for="contact_name">Імя</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_position" name="contact_position" type="text" class="validate" >
          <label for="contact_position">Посада</label>
        </div>
        <div class="input-field col m2 s12">
          <a id="add_contact_to_table_vendor_contact" class="btn-floating btn-smal waves-effect waves-light green add"><i class="material-icons">add</i></a>
        </div>

      </div>
      <div class="row">
        <div class="sub-form col s10">
            <table id="vendor_contact_table">
                <thead>
                  <tr>
                      <th>Email</th>
                      <th>Телефон</th>
                      <th>Імя</th>
                      <th>Посада</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m6 s12">
          <input id="config_name" name="config_name" type="text" class="validate"  value="default_template">
          <label for="config_name">Назва для файлу конфігурації</label>
        </div>
      </div>
      <div class="row">
        <button id="btn_add_new_vendor_form" class="btn waves-effect waves-light" type="submit" name="action">Зберегти
          <i class="material-icons right">send</i>
      </button>
      </div>
      </form>
      <!-- {% crispy form %}  -->
    </div>
    <div class="col xl6 s6 m1">
      <div class="row">
        <p class="form-title">Пошук постачальника</p>
        <form id="vendor_search_form" autocomplete="off">
          {% csrf_token %}
          <div class="row">
            {% get_all_vendors_names as vendors_names %}
            <div class="input-field col m5 s12">
              <input type=text name="vendor_name_for_search" id="vendor_name_for_search" list="vendor_name_for_search-list" class="validate">
              <label for="vendor_name_for_search">Назва постачальника</label>
              <datalist id="vendor_name_for_search-list">
                {% for vendor_name in vendors_names %}
                <option>{{vendor_name.name}}</option>
                {% endfor %}
              </datalist>
            </div>
          </div>
          <button class="btn waves-effect waves-light" type="submit" name="action">Пошук
            <i class="material-icons right">send</i>
          </button>
        </form>
      </div>
      {% if vendors %}
      <div class="table-responsive">
        <table class="table table-striped" id="vendor_list_table">
          <tr>
            <th>Назва</th>
            <th></th>
            <th></th>
          </tr>
          <tbody id="vendor_items_body">
          {% for vendor in vendors %}
          <tr>
            <td>{{vendor.name}}</td>
            {% if 'btn_vendor_detail_update' in config %}
            <td> <a href="{% url 'vendor_update' id=vendor.pk %}" class="btn-floating btn-smal"><i class="lni lni-pencil"></i></a></td>
            {% endif %}
            {% if 'btn_vendor_delete' in config %}
            <td><a href="#" id = "{{vendor.id}}" class="btn-floating btn-smal waves-effect waves-light red delete_vendor"><i id = "{{vendor.id}}" class="lni lni-cross-circle delete_vendor"></i></a></td>
            {% endif %}
          </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
    </div>
</div>
<div class="row">
  <a href="{% url 'management' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
  </a>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="{% static 'js/vendor.js' %}"></script>
{% endblock %}