{% extends "base.html" %}
{% load static %}

{% block additionnal_css %}
<link rel="stylesheet" href="{% static 'css/datatables/jquery.dataTables.css' %}">
<link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}">
<link rel="stylesheet" href="{% static 'css/oders_helper_style.css' %}">
{% endblock %}

{% block additionnal_scripts %}
<script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}?v="></script>
<script type="text/javascript" src="{% static 'js/datatables/jquery.dataTables.min.js' %}"></script>
{% endblock %}

{% block content %}
<div class="page_body">
    <div class="header txtcenter">
        <h1>Aide à la commande</h1>
    </div>

    <div class="txtcenter" id="form_container">
        <form action="javascript:;" id="supplier_form">
            <input type="text" name="supplier" id="supplier_input" placeholder="Rechercher un fournisseur par son nom">
            <button type="submit" class='btn--primary'>Ajouter le fournisseur</button>
        </form>
    </div>

    <div class="txtcenter" id="suppliers_container"></div>

    <div class="main" style="display:none;">
        <div class="table_area">
            <table id="products_table" class="display" cellspacing="0" width="100%"></table>
        </div>
    </div>
</div>

<div id="templates" style="display:none;">
    <div id="supplier_pill">
        <div class="supplier_pill">
            <div class="supplier_name_container">
                <span class="supplier_name"></span>
                <i class="fas fa-times remove_supplier_icon"></i>
            </div>
        </div>
    </div>

    <div id="modal_remove_supplier">
        <h3>Attention !</h3>
        <p>
            Vous vous apprêtez à supprimer le fournisseur <span class="supplier_name"></span>.<br/>
            Les produits associés à ce fournisseur uniquement seront supprimés.<br/>
            Les données renseignées dans la colonne de ce fournisseur seront perdues.
        </p>
        <p>Êtez-vous sûr ?</p>
        <ul id="list_unprocessable_porducts"></ul>
        <hr/>
    </div>
</div>

<script src="{% static "js/all_common.js" %}?v="></script>
<script type="text/javascript" src="{% static 'js/orders_helper.js' %}?v="></script>
{% endblock %}
