<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ajout d'un produit</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>Ajout d'un produit</h1>
    <div class="form">
        <form action="/material/creator" class="requireAuth" enctype="multipart/form-data" method="POST">
            <table>

                <tr>
                    <td><b><label for="materialCode">Code du produit: </label></b></td>
                    <td><input id="materialCode" name="materialCode" type="text"/></td>
                    <td></td>
                </tr>

                <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" type="number">
                    </td>

                    <!--Contient la quantité en millilitres-->
                    <input id="inventoryQuantity" name="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><b><label for="materialType">Type de produit: </label></b></td>
                    <td>
                        <select id="materialType" name="materialType">
                            <th:block th:each="materialType : ${materialTypes}">
                                <option th:text="${materialType.materialTypeName}"
                                        th:value="${materialType.materialTypeID}"></option>
                            </th:block>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td><b><label for="simdut">Fichier SIMDUT: </label></b></td>
                    <td><input id="simdut" name="simdut" type="file"></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>
    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>