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

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

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

{% block content %}
{% if add_admin_mode %}
  {% include "common/conn_admin.html" %}
{% endif %}
<div class="page_body">
  <header class="flex-container">
    <button class="right btn--danger" id="back_button">Retour</button>
    <div class="w33 arrow-block txtcenter" id="header_step_one">
      <h4 id="header_step_one_content">Produits à compter </h4>
    </div>
    <div class="w33 arrow-block txtcenter" id="header_step_two">
      <h4>Prix à mettre à jour</h4>
    </div>
    <div class="item-fluid arrow-block txtcenter" id="header_step_three">
      <h4>Réception terminée</h4>
    </div>
  </header>
  <section class="grid-2 has-gutter" id="main_content">
    <div>
      <section id="container_partner_name" class="page_element grid-2 has-gutter">
        <div class="txtright">
          <h3><b>Livraison de :</b></h3>
        </div>
        <div class="txtleft">
          <h3><b><span id="partner_name"></span></b></h3>
        </div>
      </section>

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

      <div id="container_search_edition">
        <div id="container_search">
          <div class="txtcenter">
            <input autocomplete="off" type="text" placeholder="Rechercher un produit par son nom ou son code barre" class="searchMultipleTables" id="search_input" autofocus>
          </div>
        </div>

        <div id="container_edition">
          <form action="javascript:;" name="edition" onsubmit="validateEdition(this)">
            <div>
              <h4 id="edition_header"></h4>
            </div>
            <div class="grid-9 has-gutter">
              <div class="col-4">
                <p id="product_name"></p>
              </div>
              <div class="col-3 center">
                <label for="edition_input" id="edition_input_label"></label>
                <input type="text" class="number input_small" id="edition_input" autocomplete="off" required>
                <span id="product_uom"></span>
              </div>
              <div class="col-1 center">
                <a class="btn" id='edition_cancel'>
                  <i class="far fa-window-close fa-lg"></i>
                </a>
              </div>
              <div class="col-1 center">
                <button type="submit" class="btn" id='edition_valid'>
                  <i class='far fa-check-square fa-lg'></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div>
      <div class="page_element txtcenter">
        <button class="btn btn_light full_width_button" onclick="openErrorReport()">Renseigner un problème de livraison</button>
      </div>
      <div class="page_element txtcenter">
        <button class="btn--warning full_width_button" name="faq" onclick="openFAQ()">FAQ - En cas de soucis avec la marche à suivre...</button>
      </div>
      <div class="page_element txtcenter">
          <div id="remaining_lines_actions_area">
            <span id="valid_all"></span>
            <span id="all_left_is_good">
              <button 
                class='btn--danger half_width_button'
                id="all_left_is_good_button"
                onclick="openModal($('#templates #modal_all_left_is_good').html(), confirm_all_left_is_good, 'Confirmer', false);" 
              >
                Tout le reste est bon
              </button>
            </span>
          </div>
      </div>
    </div>

    <div class="container_products" id="container_left">
      <h4 id="header_container_left"></h4>
      <table id="table_to_process" class="display" cellspacing="0" ></table>
    </div>
    <div class="container_products" id="container_right">
      <h4 id="header_container_right"></h4>
      <table id="table_processed" class="display" cellspacing="0" ></table>
    </div>
    <div class="txtcenter add_products_button_container">
      <button id="add_products_button" class="btn--inverse full_width_button">Ajouter des produits</button>
    </div>
    <div class="txtcenter">
      <span id="validation_button"></span>
    </div>
  </section>

  <div id="templates" style="display:none;">
    <div id="modal_error_report">
      <h2>Renseigner un problème de livraison</h2>
      <hr />

      <p class="txtleft">
        {{RECEPTION_PB}}
      </p>
      <br>
      <textarea id="error_report"></textarea>
      <hr />
    </div>
    <div id="modal_no_prices">
      <h2>Attention !</h2>
      <p>Vous vous apprêtez à indiquer qu'il n'y a pas de prix à vérifier pour cette commande.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_no_qties">
      <h2>Attention !</h2>
      <p>Vous vous apprêtez à indiquer qu'il n'y a plus de produits à compter.</p>
      <p>Cela aura pour effet de passer toutes les quantités restantes à 0.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_qties_validation">
      <h3>Attention !</h3>
      <p>Vous vous apprêtez valider le comptage des produits et passer à l'étape suivante.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_prices_validation">
      <h3>Attention !</h3>
      <p>Vous vous apprêtez valider la mise à jour des prix et passer à l'étape suivante.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_set_supplier_shortage">
      <h3>Attention !</h3>
      <p>Vous vous apprêtez indiquer que le produit<b><span class="supplier_shortage_product"></span></b>
          est en rupture chez le fournisseur<b><span class="supplier_shortage_supplier"></span></b>.</p>
      <p>La quantité du produit sera mise à 0 si vous en êtes à l'étape du comptage de produits.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_unprocessable_porducts">
      <h3>Traitement impossible</h3>
      <p>
        La réception ne peut être validée car certains produits sont archivés.
        Merci de transmettre à un.e salarié.e la liste des produits à désarchiver :
      </p>
      <ul id="list_unprocessable_porducts"></ul>
      <hr/>
    </div>
    <div id="modal_all_left_is_good">
      <h2>Attention !</h2>
      <p>Vous vous apprêtez à indiquer que toutes les informations des produits restant dans la colonne de gauche sont bonnes.</p>
      <p>Êtez-vous sûr ?</p>
      <hr />
    </div>
    <div id="modal_FAQ_content"></div>
    <div id="modal_qtiesValidated"></div>
    <div id="modal_pricesValidated"></div>
    <div id="modal_confirm_price_to_weight">
      <h3>Confirmation du prix</h3>
      <p>Est ce que le prix au kilo du produit <b><span id="product_to_verify"></span></b>
      est bien <b><span id="price_to_verify"></span></b> euros/Kg ?</p>
      <input type="number" name="Prix au Kilo" id="new_price_to_weight">
    </div>
    <div id="modal_add_products">
      <h3>Ajouter des produits à la commande</h3>
      <div class="search_products_to_add_area">
        <input type="text" class="search_product_input" name="search_product_input" placeholder="Rechercher un produit...">
        <i 
          class='fa fa-info-circle search_product_help'
          title='Vous ne trouvez pas un produit ? Les produits déjà dans la commande ou déjà sélectionnés ont été retirés de la liste.'
          >
        </i>
      </div>
      <div class="products_lines">
        <p class="products_lines_title">
          Liste des produits qui seront ajoutés à la commande. 
          <b>Vous devez renseigner une quantité pour chaque produit.</b>
        </p>
      </div>
      <hr />
    </div>
    <div id="modal_no_product_to_add">
      <h3>Ajouter des produits à la commande</h3>
      <div class="no_products_to_add_area">
        Aucun produit à ajouter : tous les produits de ce(s) fournisseur(s) sont déjà dans la commande.
      </div>
      <hr />
    </div>
    <div id="add_product_line_template">
      <div class="add_product_line">
        <div class="product_name add_product_line_item"></div>
        <div class="product_qty add_product_line_item">
          <div class="input_uom_container">
            <input type="number" autocomplete="off" class="product_qty_input input_small" placeholder="Quantité">
            <div class="product_uom"></div>
          </div>
          <i class="product_qty_input_alert">Vous devez renseigner une quantité</i>
        </div>
        <div class="remove_line">
          <i class="fas fa-times fa-lg remove_line_icon"></i>
        </div>
      </div>
    </div>
  </div>
  <br/>
</div>

<script src="{% static 'js/pouchdb.min'|add:POUCHDB_VERSION|add:'.js' %}"></script>        
<script type="text/javascript">
  var tools_server = '{{TOOLS_SERVER}}'
  var fixed_barcode_prefix = '{{FIXED_BARCODE_PREFIX}}'
  var couchdb_dbname = '{{db}}';
  var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
  var display_autres = "{{DISPLAY_AUTRES}}";
  var add_all_left_is_good_qties = "{{ADD_ALL_LEFT_IS_GOOD_QTIES}}"
  var add_all_left_is_good_prices = "{{ADD_ALL_LEFT_IS_GOOD_PRICES}}"
  var add_products_pswd = "{{add_products_pswd}}"
  var update_qty_pswd = "{{update_qty_pswd}}"
  var allow_four_digits_in_reception_price = '{{allow_four_digits_in_reception_price}}';
</script>
<script src="{% static "js/all_common.js" %}?v=1651853225"></script>
<script src='{% static "js/barcodes.js" %}?v=1651853225'></script>
<script type="text/javascript" src="{% static 'js/reception_produits.js' %}?v=1651853225"></script>
{% endblock %}