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

<!-- 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="#{material.add.title}"></h1>

    <form th:action="@{/material/creator}" th:object="${material}" class="requireAuth" enctype="multipart/form-data"
          method="POST">
        <input type="hidden" name="isMixType" th:value="false" required />
        <div class="content">
            <div class="formWrap">
                <div class="formColumn">
                    <div>
                        <label th:for="${#ids.next('name')}" th:text="#{material.code} + ':'"></label>
                    </div>
                    <div>
                        <label for="quantity" th:text="#{material.inventoryQuantity} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('materialType')}" th:text="#{material.type} + ':'"></label>
                    </div>
                    <div>
                        <label for="simdut" th:text="#{material.simdut} + ':'"></label>
                    </div>
                </div>
                <div class="formColumn">
                    <div>
                        <input type="text"
                               class="rawInput"
                               th:field="*{name}"
                               required/>
                    </div>
                    <div style="display: flex; flex-direction: row">
                        <input class="rawInput"
                               data-unit="mL"
                               id="quantity"
                               min="0"
                               name="quantity"
                               onchange="calculateMilliliters(this)"
                               required
                               step="0.001"
                               th:value="${material.inventoryQuantity}"
                               type="number"
                               style="margin-right: 10px; width: 50px">
                        <!--Contient la quantité en millilitres-->
                        <input type="hidden"
                               th:field="*{inventoryQuantity}" required/>

                        <select id="units"
                                name="units"
                                onchange="switchUnits(this)">
                            <option selected value="mL" th:text="#{units.milliliters}"></option>
                            <option value="L" th:text="#{units.liters}"></option>
                            <option value="gal" th:text="#{units.gallons}"></option>
                        </select>
                    </div>
                    <div>
                        <select th:field="*{materialType}" required>
                            <option th:each="materialType : ${materialTypes}" th:value="${materialType.id}"
                                    th:text="${materialType.name}"></option>
                        </select>
                    </div>
                    <div>
                        <input id="simdut"
                               class="rawInput"
                               name="simdut"
                               type="file"
                               style="width: 145px"/>
                    </div>
                </div>
            </div>
        </div>
        <div th:include="fragments.html :: formEndButtons"></div>
    </form>
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>

<script>
    function switchUnits(unitSelect) {
        unitSelect = $(unitSelect);

        const quantityElem = $("#quantity");
        quantityElem.data({unit: unitSelect.val()});
        calculateMilliliters(quantityElem);
    }

    function calculateMilliliters(input) {
        input = $(input);
        const quantity = input.val();
        const unit = $("#units").val();

        let convertedQuantity = quantity;

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

        $("#inventoryQuantity").val(convertedQuantity);
    }
</script>
</body>
</html>
