{% 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>
<script type="text/javascript" src="{% static 'js/notify.min.js' %}?v="></script>
{% endblock %}

{% block content %}
<div class="page_body">
    <div id="select_order_content" class="page_content txtcenter">
        <div class="login_area">
            {% include "common/conn_admin.html" %}
        </div>
        <div id="new_order_area">
            <h2>Créer une nouvelle commande</h2>
            <div class="txtcenter" id="not_connected_content" style="display:none;">
                <p>Vous devez vous connecter avec un compte Odoo pour accéder au module d'aide à la commande.</p>
            </div>
            <form id="new_order_form" style="display:none;">
                <input type="text" id="new_order_name" placeholder="Nom de la commande...">
                <button type="submit" class="btn btn--primary">C'est parti !</button>
            </form>
        </div>
        <div id="existing_orders_area" style="display:none;">
            <h2>Ou, continuer une commande en cours de création</h2>
            <div id="existing_orders"></div>
        </div>
    </div>

    <div id="main_content" class="page_content" style="display:none;">
        <div class="actions_buttons_area">
            <button type="button" class="btn--danger" id="back_to_order_selection_from_main">
                <i class="fas fa-arrow-left"></i>&nbsp; Retour
            </button>
            <div class="right_action_buttons">
                
                <div id="actions_buttons_wrapper">
                    <button type="button" class='btn--primary' id="toggle_action_buttons">
                        <span class="button_content">
                            Actions
                        </span>
                        <span class="toggle_action_buttons_icon">
                            <i class="fas fa-chevron-down"></i>
                        </span>
                    </button>
                    <div id="actions_buttons_container">
                        <button type="button" class='btn--primary action_button' id="do_inventory" style="display:none;">
                            Faire un inventaire
                        </button>
                        <button type="button" class='btn--primary action_button' id="refresh_order">
                            Rafraîchir la commande
                        </button>
                        <button type="button" class='btn--danger action_button' id="delete_order_button">
                            Supprimer la commande
                        </button>
                    </div>
                </div>
                <a class='btn--warning link_as_button' id="access_metabase" style="display:none;" href="{{metabase_url}}" target="_blank">
                    Stats Métabase
                </a>
            </div>
        </div>
    
        <div class="header txtcenter">
            <h1>Aide à la commande</h1>
            <p id="order_data_container">
                Commande : <span class="order_name_container"></span> 
                <span id="order_data_separator"> | </span>
                Total HT : <span id="order_total_value">0</span>€
            </p>
        </div>
    
        <div class="txtcenter" id="order_forms_container">
            <form action="javascript:;" id="supplier_form" class="order_form_item">
                <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>
            <form action="javascript:;" id="stats_date_from_form" class="order_form_item">
                <label for="stats_date_period_select">Période de calcul de la conso moyenne </label>

                <select name="stats_date_period_select" id="stats_date_period_select">
                    <option value="">Par défaut</option>
                    <option value="1week">1 semaine</option>
                    <option value="2weeks">2 semaines</option>
                </select>
            </form>
            <form action="javascript:;" id="coverage_form" class="order_form_item">
                <div class="input-wrapper">
                    <input type="number" name="coverage_days" id="coverage_days_input" placeholder="Nb jours de couverture" min="1">
                    <input type="number" name="percent_adjustement" id="percent_adjust_input" placeholder="ajustement en %">
                </div>
                <div>
                    <button  type="submit" class='btn--primary'>Calculer les besoins</button> <i class='main fa fa-info-circle fa-lg'></i>
                </div>
            </form>
            <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 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 id="main_content_footer" style="display:none;">
            <div id="footer_actions">
                <div class="add_product_container">
                    <div id="product_form_container">
                        <form action="javascript:;" id="product_form">
                            <input type="text" name="article" id="product_input" placeholder="Rechercher un article">
                            <button type="submit" class='btn--primary'>Ajouter l'article</button>
                        </form>
                    </div>
                </div>
                <button type="button" class='btn--primary' id="create_orders">
                    Générer les commandes
                </button>
            </div>
            </div>
    </div>

    <div id="orders_created" class="page_content" style="display:none;">
        <div class="actions_buttons_area">
            <button type="button" class="btn--danger" id="back_to_order_selection_from_orders_created">
                <i class="fas fa-arrow-left"></i>&nbsp; Retour
            </button>
        </div>
        <div class="order_created_header txtcenter">
            <h2>Commandes créées !</h2>
        </div>
        <div id="created_orders_area"></div>
        <br/><br/><hr/><br/>
        <div class="mail_example_container">
            <p class="mail_type_text">Mail type :</p>
            <div class="mail_example">
                Objet : Cde Cagette JJ/MM<br/>
                <br/>
                Bonjour XXXXXXX,<br/>
                <br/>
                Voici la commande de La Cagette pour le XX/XX/XX.<br/>
                <br/>
                Merci d'avance,<br/>
                Bonne journée
            </div>
        </div>
    </div>

    <div id="templates" style="display:none;">
        <div id="supplier_pill_template">
            <div class="pill supplier_pill">
                <div class="supplier_name_container">
                    <span class="pill_supplier_name"></span>
                    <i class="fas fa-times remove_supplier_icon"></i>
                </div>
                <div class="supplier_total_value_container">
                    Total: <span class="supplier_total_value">0</span>€
                </div>
            </div>
        </div>

        <div id="order_pill_template">
            <div class="pill order_pill btn btn--primary">
                <span class="pill_order_name"></span>
            </div>
        </div>

        <div id="new_order_item_template">
            <div class="new_order_item">
                <h3 class="new_order_supplier_name"></h3>
                <h3 class="new_order_po"></h3>
                <h4 class="new_order_date_planned"></h4>
                <div class='download_order_file'>
                    <i class="fas fa-spinner fa-spin download_order_file_loading"></i>
                    <a class='btn--success download_order_file_button' style="display:none;" href="#">
                        Télécharger le fichier de commande
                    </a>
                </div>
            </div>  
        </div>

        <div id="modal_order_access">
            <h3>Attention !</h3>
            <br/>
            <p class="order_modified_msg"> 
                Un autre navigateur a modifié cette commande il y a <span class="order_last_update"></span>.
            </p><br/>
            <p>
                Si quelqu'un d'autre que vous est à l'origine de la modification et que celle-ci est récente,
                nous conseillons fortement de ne pas accéder à la commande afin d'éviter les conflits.
            </p><br/>
            <p>Voulez-vous quand même y accéder ?</p>
            <hr/>
        </div>
    
        <div id="modal_remove_supplier">
            <h3>Attention !</h3>
            <p>
                Vous vous apprêtez à supprimer le fournisseur <span class="supplier_name"></span> de la sélection.<br/>
                Les produits associés uniquement à ce fournisseur seront supprimés du tableau.<br/>
                Les données renseignées dans la colonne de ce fournisseur seront perdues.
            </p>
            <p>Êtez-vous sûr ?</p>
            <hr/>
        </div>
    
        <div id="modal_attach_product_to_supplier">
            <h3>Attention !</h3>
            <p> 
                Vous vous apprêtez à associer le produit <span class="product_name"></span> au fournisseur <span class="supplier_name"></span>.<br/>
            </p>
            <br/>
            <div class="modal_input_area">
                <span class="modal_input_label">Prix du produit chez ce fournisseur: </span>
                <div class="modal_input_container">
                    <input type="number" class="modal_input new_product_supplier_price" >
                </div>
            </div>
            <div class="modal_input_area">
                <span class="modal_input_label">Colisage chez ce fournisseur: </span>
                <div class="modal_input_container">
                    <input type="number" class="modal_input new_product_supplier_package_pty">
                </div>
            </div>
            <br/>
            <p> 
                L'association sera sauvegardée dès que vous aurez cliqué sur "Valider".<br/>
            </p>
            <p>Êtez-vous sûr ?</p>
            <hr/>
        </div>
    
        <div id="modal_create_inventory">
            <p> 
                Vous vous apprêtez à créer un inventaire de <span class="inventory_products_count"></span> produits.
            </p>
            <p>Êtez-vous sûr ?</p>
            <hr/>
        </div>

        <div id="modal_product_actions">
            Actions sur <h3><span class="product_name"></span></h3>
            <p>
                <h4>NPA</h4>
                <div class="npa-options">
                    <label><input type="checkbox" name="npa-actions" value="simple-npa" /> Mettre le produit en NPA </label>
                    <label><input type="checkbox" name="npa-actions" value="npa-in-name" /> Mettre le produit en NPA et afficher NPA</label>
                    <label><input type="checkbox" name="npa-actions" value="fds-in-name" /> Mettre le produit en NPA et afficher FDS</label>
                </div>
            </p>
            <p>
                <h4>Stock minimum</h4>
                <input type="number" name="minimal_stock" value="" />
            </p>

        </div>

        <div id="modal_create_order">
            <h3>Dernière étape...</h3>
            <br/>
            <p>
                Vous vous apprêtez à générer les commandes à partir des données rentrées dans le tableau.
            </p>
            <p>
                Vous pouvez rentrer une date de livraison prévue pour chaque fournisseur (optionnel, la date par défaut sera celle de demain).
            </p>
            <br/>
            <div class="suppliers_date_planned_area"></div>
            <br/>
            <hr/>
        </div>
        <div id="explanations">
            {% include "orders/explanations.html" %}
        </div>
        <div id="modal_create_order__supplier_date_planned">
            <div class="modal_input_area">
                <span class="modal_input_label supplier_name"></span>
                <div class="modal_input_container">
                    <input type="text" class="modal_input supplier_date_planned" placeholder="Date de livraison prévue">
                </div>
            </div>
        </div>
    </div>
</div>


<script src="{% static "js/pouchdb.min.js" %}"></script>
<script type="text/javascript">
    var couchdb_dbname = '{{db}}';
    var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
    var odoo_server = '{{odoo_server}}';
</script>
<script src="{% static "js/all_common.js" %}?v="></script>
<script type="text/javascript" src="{% static 'js/orders_helper.js' %}?v="></script>
{% endblock %}
