<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments.html :: head(#{mix.edit.title}, 'mix')"></th:block>

    <link href="/css/form.css" rel="stylesheet"/>
</head>
<body th:with="nbrMaterials = 0, recipe = ${mix.recipe}">
<!-- Fragment de l'entête -->
<header th:include="fragments.html :: header(false)"></header>
<!-- Corps de la page -->
<section>
    <div th:include="fragments.html :: messages"></div>
    <h1 th:text="#{mix.edit.subtitle(${recipe.name}, ${mix.mixType.name})}"></h1>
    <br/>
    <br/>

    <form th:action="@{/mix/editor/}" class="requireAuth" method="POST">
        <!-- Information nécessaire à la création des mélanges -->
        <input id="recipeId" name="recipe" th:value="${recipe.id}" type="hidden"/>
        <input id="mixId" name="mixId" th:value="${mix.id}" type="hidden"/>
        <input id="oldMixTypeName" name="oldMixTypeName" th:value="${mix.mixType.name}" type="hidden"/>

        <div class="content">
            <div class="flexContent formWrap">
                <div class="formColumn">
                    <div>
                        <label for="mixType" th:text="#{mix.mixType} + ':'"></label>
                    </div>
                    <div>
                        <label for="materialType" th:text="#{material.type} + ':'"></label>
                    </div>
                </div>
                <div class="formColumn">
                    <div>
                        <input type="text" id="mixType"
                               name="mixTypeName"
                               placeholder="ex: Teinture"
                               th:value="${mix.mixType.name}"
                               required/>
                    </div>
                    <div>
                        <select name="materialType" id="materialType">
                            <option th:each="currentMaterialType : ${materialTypes}"
                                    th:value="${currentMaterialType.id}"
                                    th:text="${currentMaterialType.name}"
                                    th:selected="${currentMaterialType.id == materialType.id}"></option>
                        </select></div>
                </div>
            </div>
            <div class="flexContent materialListWrap" style="margin: auto">
                <div class="mixMaterialListTitle">
                    <div class="positionButtons">
                    </div>
                    <div class="material">
                        <h3 th:text="#{keyword.material}"></h3>
                    </div>
                    <div class="quantity">
                        <h3 th:text="#{keyword.quantity}"></h3>
                    </div>
                    <div class="units">
                        <button type="button">+</button>
                    </div>
                    <div class="removeButton"></div>
                </div>
                <div class="mixMaterialList"></div>
            </div>
            <div th:include="fragments.html :: formEndButtons"></div>
            <div>
                <button type="button" id="removeMix" th:text="#{keyword.delete}"></button>
            </div>
        </div>
    </form>
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>

<script src="/js/mix.js"></script>
<script>
    /*<![CDATA[*/
    $(() => {
        // Récupère les matériaux sous forme JSON depuis le thymeleaf et le valide.
        const materialsText = "[[${materialsJson}]]";
        materials = JSON.parse(materialsText.replace(/&quot;/g, '"').replace(/&#39;/g, '\'').replace(/\r\n/g, ""));

        removeText = "[[#{keyword.remove}]]";

        $("#removeMix").on({
            click: function() {
                showMessage(errorMsg);
                checkPassword(null, () => window.location.href = `/mix/remover/[[${mix.id}]]`);
            }
        });
    });

    function init() {
        const mixText = "[[${mixJson}]]";
        const mix = JSON.parse(mixText.replace(/&quot;/g, '"'));

        // Ajoute les produits déjà présents dans la recette
        mix.mixQuantities.forEach(q => {
            addMaterial(q.material.name, q.quantity);
        });
    }

    /*]]*/
</script>
</body>
</html>
