<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'Modification de ' + ${recipe.recipeCode}"></title>

    <link href="/css/main.css" rel="stylesheet"/>
    <link href="/css/forms.css" rel="stylesheet"/>

    <style>
        p {
            display: inline;
        }

        .recipe table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        .recipe td, .recipe th {
            min-width: 100px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<section>
    <p class="error" th:text="${error}"></p>

    <h1 th:text="'Modification de ' + ${recipe.recipeCode}"></h1>
    <button id="gotoRecipe" type="button">Voir</button>
    <br/>
    <br/>

    <div class="form">
        <form action="/recipe/editor" class="requireAuth" method="POST">
            <input id="recipeID" name="recipeID" th:value="${recipe.recipeID}" type="hidden"/>
            <input name="recipeCode" th:value="${recipe.recipeCode}" type="hidden"/>

            <table class="mainTable">
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td><label for="company">Bannière: </label></td>
                                <td>
                                    <select id="company" name="company">
                                        <th:block th:each="company : ${companies}">
                                            <option th:selected="${recipe.company.equals(company)}"
                                                    th:text="${company.companyName}"
                                                    th:value="${company.companyID}"></option>
                                        </th:block>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr/>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="recipeDescription">Description: </label></td>
                                <td><input id="recipeDescription" name="recipeDescription"
                                           th:value="${recipe.recipeDescription}"
                                           type="text"/></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr/>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="sample">Échantillon: </label></td>
                                <td><input id="sample" name="sample" th:value="${recipe.sample}" type="number"/></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr/>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="approbationDate">Date d'approbation: </label></td>
                                <td><input id="approbationDate" name="approbationDate"
                                           th:value="${recipe.approbationDate}"
                                           type="date"/></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr/>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="remark">Remarque: </label></td>
                                <td><textarea cols="30" id="remark" name="remark" rows="10"
                                              th:text="${recipe.remark}"></textarea>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table>
                            <th:block th:each="mix : ${mixes}">
                                <tr>
                                    <td>
                                        <p th:text="${mix.mixType.typeName} + ':'"></p>
                                        <th:block th:if="${mix != null}">
                                            <button class="mixEditor" th:data-mixID="${mix.mixID}" type="button">
                                                Modifier
                                            </button>
                                        </th:block>
                                    </td>
                                    <td>
                                        <div class="recipe">
                                            <table style="margin-left: 50px">
                                                <!-- Produits -->
                                                <tr>
                                                    <th>Produit</th>
                                                    <th>Type</th>
                                                    <th>Quantité</th>
                                                </tr>
                                                <th:block th:each="mixQuantity : ${mix.mixQuantities}"
                                                          th:with="material = ${mixQuantity.material}">
                                                    <tr>
                                                        <td th:classappend="${material.isMixType()} ? '' : materialCode"
                                                            th:data-materialID="${material.materialID}"
                                                            th:text="${material.materialCode}"></td>
                                                        <td>
                                                            <p th:text="${material.materialType.materialTypeName}"></p>
                                                        </td>
                                                        <td th:text="${mixQuantity.quantity}"></td>
                                                    </tr>
                                                </th:block>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <hr/>
                                    </td>
                                </tr>
                            </th:block>
                            <tr>
                                <td></td>
                                <td>
                                    <button id="newMix" type="button">Ajouter un mélange</button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Étapes
                                </td>
                                <td>
                                    <table id="steps">
                                        <tr>
                                            <th>
                                                <button id="addStep" type="button">+</button>
                                            </th>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- Images -->
                <th:block th:each="image : ${images}">
                    <tr>
                        <td class="centerTD">
                            <img alt="Image supprimée ou corrompue" th:src="'/images/' + ${image}" width="400px"/>
                        </td>
                        <td>
                            <button class="deleteImg" th:data-image="${image}" type="button">Supprimer</button>
                        </td>
                    </tr>
                </th:block>
                <tr>
                    <td>
                        <button id="addImg" th:data-recipeID="${recipe.recipeID}" type="button">Ajouter une image
                        </button>
                    </td>
                </tr>
                <tr class="mainTableEndButtons">
                    <td class="centerTd">
                        <button class="returnIndex" type="button">Retour</button>
                    </td>
                    <td class="centerTd">
                        <button type="submit">Enregistrer</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</section>

<script src="/js/main.js"></script>
<script>
    /*[CDATA[*/
    (() => {
        const errorP = document.querySelector(".error");

        document.querySelector("#gotoRecipe").addEventListener("click", () => {
            window.open("/recipe/explore/" + document.querySelector("#recipeID").value, "_blank");
        });

        document.querySelectorAll(".mixEditor").forEach(e => {
            e.addEventListener("click", () => {
                const mixID = e.getAttribute("data-mixID");

                document.location.href = "/mix/editor/" + mixID;
            });
        });

        document.querySelector("#newMix").addEventListener("click", () => {
            const recipeID = "[[${recipe.recipeID}]]";

            document.location.href = "/mix/creator/" + recipeID;
        });

        document.querySelectorAll(".deleteImg").forEach(e => {
            e.addEventListener("click", () => {
                let data = {};

                data['image'] = e.getAttribute("data-image");
                data['password'] = prompt("Quel est votre mot de passe?");

                errorP.innerHTML = "";

                axios.post("/images/delete", data)
                    .then(r => {
                        const data = r.data;

                        if (data['error'] !== undefined) {
                            errorP.innerHTML = data['error'];
                        } else {
                            document.location.reload();
                        }
                    })
                    .catch(e => {
                        console.log(e);
                        errorP.innerHTML = "Une erreur est survenue lors de l'envoie des informations vers le serveur.";
                    });
            });
        });

        document.querySelector("#addImg").addEventListener("click", () => {
            document.location.href = "/images/add/[[${recipe.recipeID}]]";
        });

        let stepNbr = 0;

        const recipeText = "[[${recipeJSON}]]";
        const recipeJSON = JSON.parse(recipeText.replace(/&quot;/g, '"').replace(/&#39;/g, '\'').replace(/\r\n/g, ""));

        // Ajoute les étapes déjà présentes dans la recette
        recipeJSON.recipeSteps.forEach((s) => {
            let input = document.createElement("input");
            input.type = "text";
            input.name = `step_${stepNbr}`;
            input.value = s.stepMessage;

            let column = document.createElement("td");
            column.appendChild(input);

            let row = document.createElement("tr");
            row.appendChild(column);

            document.querySelector("#steps tbody").appendChild(row);

            stepNbr++;
        });

        document.querySelector("#addStep").addEventListener("click", () => {
            let input = document.createElement("input");
            input.type = "text";
            input.name = `step_${stepNbr}`;

            let column = document.createElement("td");
            column.appendChild(input);

            let row = document.createElement("tr");
            row.appendChild(column);

            document.querySelector("#steps tbody").appendChild(row);

            stepNbr++;
        });
    })();
    /*]]*/
</script>
</body>
</html>