<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Inventaire</title>

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

    <style>
        td, th {
            min-width: 100px;
        }

        table {
            margin: 50px auto;
            text-align: left;
        }

        section {
            text-align: center;
        }

        .materialRow:hover td {
            background-color: #f0f0f0;
            font-weight: bolder;
        }

        .lowQuantity td {
            background-color: #fff0b3;
        }

        .hidden, .hiddenWrongType {
            display: none;
        }
    </style>
</head>
<body>

<section>
    <th:block th:each="materialType : ${materialTypes}"
              th:if="${materialType.materialTypeName.equalsIgnoreCase('aucun')}">
        <input id="anyTypeId" th:value="${materialType.materialTypeID}" type="hidden"/>
    </th:block>
    <h1>Inventaire</h1>

    <th:block th:if="${!materials.empty}">
        <table>

            <!--Titres des colonnes et options de recherche-->
            <tr>
                <th>Produit</th>
                <th>Quantité</th>

                <!--Unités de la quantité-->
                <td></td>

                <th>Type</th>
                <td></td>

                <!--Options-->
                <td rowspan="5">
                    <label for="lowQuantity">Quantité faible: </label>
                    <input id="lowQuantity" min="0" onchange="checkLowQuantity(this.value)" step="0.01"
                           style="width: 65px" type="number"
                           value="100"/>
                    <br/>
                    <input id="hideOthers" onchange="hide(this.checked)" type="checkbox"/><label for="hideOthers">Cacher
                    les autres produits</label>
                    <br/>
                    <br/>

                    <label for="materialTypeSelect">Voir seulement: </label>
                    <select id="materialTypeSelect" name="materialTypeSelect" onchange="hideMaterialTypes(this)">
                        <th:block th:each="materialType : ${materialTypes}">
                            <option th:text="${materialType.materialTypeName}"
                                    th:value="${materialType.materialTypeID}"></option>
                        </th:block>
                    </select>
                    <br/>
                    <br/>

                    <label for="units">Unités: </label>
                    <select id="units" name="units"
                            onchange="changeUnits(this, '.inventoryQuantity', '.inventoryQuantityUnits')">
                        <option selected value="mL">Millilitres</option>
                        <option value="L">Litres</option>
                        <option value="gal">Gallons</option>
                    </select>
                </td>

            </tr>

            <!--Produits-->
            <th:block th:each="material : ${materials}">
                <tr class="materialRow"
                    th:data-materialType="${material.materialType.materialTypeID}">
                    <td class="materialCode" th:data-materialID="${material.materialID}"
                        th:text="${material.materialCode}"></td>
                    <td class="inventoryQuantity" th:data-quantityML="${material.inventoryQuantity}"
                        th:text="${material.inventoryQuantity}"></td>
                    <td><span class="inventoryQuantityUnits">mL</span></td>
                    <td class="materialType" th:text="${material.materialType.materialTypeName}"></td>
                    <td>
                        <button class="modifyMaterial" th:data-materialID="${material.materialID}" type="button">
                            Modifier
                        </button>
                    </td>
                </tr>
            </th:block>

        </table>
    </th:block>
    <th:block th:if="${materials.empty}">
        <b class="error">Aucun produit n'a été trouvé.</b>
    </th:block>
</section>

<script>
    (() => {

        // Rajoute un événement sur les boutons pour modifier les produits pour rediriger l'utilisateur vers la page de modification
        document.querySelectorAll(".modifyMaterial").forEach(e => {
            e.addEventListener("click", () => {
                document.location.href = `/material/editor/${e.dataset.materialid}`;
            });
        });

    })();

    // Ajoute la classe "lowQuantity" au produits qui ont une quantité en inventaire inférieur à la quantité limite définie
    function checkLowQuantity(value) {
        document.querySelectorAll(".materialRow").forEach(e => {

            if (parseFloat(e.querySelector(".inventoryQuantity").innerHTML) < value) {
                e.classList.add("lowQuantity");
            } else {
                e.classList.remove("lowQuantity");
            }

            hide(document.querySelector("#hideOthers").checked);
        });
    }

    // Cache ou dévoile les produits qui ont la classe "lowQuantity", dépendamment du paramètre "checked"
    function hide(checked) {
        if (checked) {
            document.querySelectorAll(".materialRow").forEach(e => {
                if (!e.classList.contains("lowQuantity")) {
                    e.classList.add("hidden");
                } else {
                    e.classList.remove("hidden");
                }
            });
        } else {
            document.querySelectorAll(".hidden").forEach(e => {
                e.classList.remove("hidden");
            });
        }
    }

    // Cache les produits qui ne sont pas du type de produit spécifié dans le paramètre "select", si le type de produit n'est pas "Aucun"
    function hideMaterialTypes(select) {
        const value = select.value;
        const anyValue = document.querySelector("#anyTypeId").value;

        document.querySelectorAll(".materialRow").forEach(e => {
            if (value !== anyValue && e.dataset.materialtype !== value) {
                e.classList.add("hiddenWrongType");
            } else {
                e.classList.remove("hiddenWrongType");
            }
        });
    }
</script>
<script src="/js/main.js"></script>
</body>
</html>
