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

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

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

    <h1 class="materialCode" th:text="'Modification de ' + ${material.materialCode}"></h1>
    <div class="form">
        <form action="/material/editor" class="requireAuth" method="POST">
            <input id="materialID" name="materialID" th:value="${material.materialID}" type="hidden"/>
            <input name="materialCode" th:value="${material.materialCode}" type="hidden"/>

            <table>
                <tr>
                    <td><b><label for="inventoryQuantity">Quantité en inventaire: </label></b></td>
                    <td><input data-unit="mL" id="quantity" min="0" name="quantity"
                               onchange="calculateMilliliters(this.value, this.dataset.unit)" step="0.01"
                               th:value="${material.inventoryQuantity}" type="number"></td>

                    <!--Contient la quantité en millilitres-->
                    <input id="inventoryQuantity" name="inventoryQuantity" th:value="${material.inventoryQuantity}"
                           type="hidden"/>
                    <td>
                        <select id="units" name="units"
                                onchange="switchUnits(this)">
                            <option selected value="mL">Millilitres</option>
                            <option value="L">Litres</option>
                            <option value="gal">Gallons</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="materialType">Type de produit: </label></td>
                    <td><select id="materialType" name="materialType">
                        <th:block th:each="materialType : ${materialTypes}">
                            <option th:attrappend="selected=${materialType.materialTypeName.equalsIgnoreCase('aucun') || materialType.materialTypeID == material.materialType.materialTypeID}"
                                    th:text="${materialType.materialTypeName}"
                                    th:value="${materialType.materialTypeID}"></option>
                        </th:block>
                    </select></td>
                </tr>
                <tr>
                    <td>
                        <button id="showSIMDUT" type="button">Fichier SIMDUT</button>
                    </td>
                    <td>
                        <button id="editSIMDUT" type="button">Modifier</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="returnIndex" type="button">Retour</button>
                    </td>
                    <td>
                        <button type="submit">Enregistrer</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</section>

<script src="/js/main.js"></script>
<script>
    (() => {
        const materialID = document.querySelector("#materialID").value;

        document.querySelector("#showSIMDUT").addEventListener("click", () => {
            window.open(`/simdut/${materialID}`);
        });

        document.querySelector("#editSIMDUT").addEventListener("click", () => {
            document.location.href = `/material/simdut/${materialID}`;
        });
    })();

    function switchUnits(unitSelect) {
        const quantityElem = document.querySelector("#quantity");
        quantityElem.dataset.unit = unitSelect.value;
        calculateMilliliters(quantityElem.value, unitSelect.value);
    }

    function calculateMilliliters(quantity, unit) {
        let convertedQuantity = quantity;

        switch (unit) {
            case "L":
                convertedQuantity = quantity * lTomL;
                break;
            case "gal":
                convertedQuantity = quantity * galTomL;
                break;
            default:
                break;
        }

        document.querySelector("#inventoryQuantity").value = convertedQuantity;
    }
</script>
</body>
</html>