<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments.html :: head(#{material.editing.title(${material.name})}, '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.editing.title(${material.name})}"></h1>

    <form th:action="@{/material/editor}" th:object="${material}" class="requireAuth" method="POST">
        <input type="hidden" th:field="*{id}"/>

        <div class="content">
            <div class="formWrap">
                <div class="formColumn">
                    <div>
                        <label th:for="${#ids.next('id')}" th:text="#{keyword.id} + ':'"></label>
                    </div>
                    <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 th:text="#{material.simdut} + ':'"></label>
                    </div>
                </div>
                <div class="formColumn">
                    <div>
                        <input type="number" th:field="*{id}" required readonly/>
                    </div>
                    <div>
                        <input type="text"
                               class="rawInput"
                               th:field="*{name}"
                               required />
                    </div>
                    <div style="display: flex; flex-direction: row">
                        <input data-unit="mL"
                               class="rawInput"
                               id="quantity"
                               min="0"
                               name="quantity"
                               required
                               onchange="calculateMilliliters(this)"
                               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}">
                            <option th:each="mType : ${materialTypes}"
                                    th:attrappend="selected=${mType.id == material.materialType.id}"
                                    th:text="${mType.name}"
                                    th:value="${mType.id}"></option>
                        </select>
                    </div>
                    <div>
                        <button id="showSIMDUT" type="button" th:text="#{keyword.see}"></button>
                        <button id="editSIMDUT" type="button" th:text="#{keyword.edit}"></button>
                    </div>
                </div>
            </div>
            <div th:include="fragments.html :: formEndButtons"></div>
        </div>
    </form>
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>

<script>
    $(() => {
        const materialId = $("#id").val();

        $("#showSIMDUT").on({
            click: () => {
                window.open(`/simdut/${materialId}`);
            }
        });

        $("#editSIMDUT").on({
            click: () => {
                window.location.href = `/material/simdut/${materialId}`;
            }
        });

        checkSimdutAvailability(materialId, null, () => $("#showSIMDUT").hide());
    });

    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>
