<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Postavi oglas</title>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <script src="./assets/js/filter.js"></script>
</head>
<body>

<script>

    function formValidator(){

	var plata = document.getElementById('plata');

			if(isNumeric(plata, "Unesite samo cifre za platu")){
			        return true;
			}

	    return false;
    }


function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;

	if(elem.value.match(numericExpression))
        {
            return true;
        }
	else
	    {
            alert(helperMsg);
            elem.focus();
            return false;
	    }
    }



</script>

    <div class="container text-center">
        <h1>Novi oglas</h1>


        <form th:action="@{/proces_postavi_oglas}" method="post"
              style="max-width: 600px; margin: 0 auto;"
              th:onsubmit="return formValidator()"
              th:object="${oglas}"
        >


        <div class="m-3">

            <div class="form-group row">
                <label class="col-form-label col-4">Naslov</label>
                <div class="col-8">
                    <input type="text" class="form-control" th:field="*{naslov}" required minlength="3" maxlength="44"/>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Pozicija</label>
                <div class="col-8">
                    <input type="text" class="form-control" th:field="*{pozicija}" required minlength="3" maxlength="44"/>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Plata</label>
                <div class="col-8">
                    <input id="plata" type="text" class="form-control" th:field="*{plata}" required minlength="3" maxlength="44"/>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Opis</label>
                <div class="col-8">
                    <textarea class="form-control" th:field="*{opis}" required minlength="3"/>
                </div>
            </div>


            <div class ="form-group row">
                <label class="col-form-label col-4">Lokacija</label>
                <div class="col-8">
                    <select th:field="*{idLokacije}" class="form-control">
                        <option th:each="lokacija: ${listaLokacija}" th:value="${lokacija.idLokacije}" th:text="${lokacija.naziv}"></option>
                    </select>
                </div>
            </div>

            <div class ="form-group row">
                <label class="col-form-label col-4">Kategorija</label>
                <div class="col-8">
                    <select id="oblast" onchange="promeniPodkategorije(this)" th:field="*{idKategorije}" class="form-control" required>
                        <option value="">Izaberite oblast...</option>
                        <option th:each="kategorija: ${listaKategorija}" th:value="${kategorija.idKategorije}" th:text="${kategorija.naziv}"></option>
                    </select>
                </div>
            </div>

            <div id="izborPodkategorija" class="form-group row">
                <label class="col-form-label col-4">Podkategorije</label>
                <div class="col-8">
                    <th:block th:each="podkat:${listaPodkategorija}">
                        <label style="display:none"><th:block th:text="${podkat.naziv}"></th:block>
                            <input th:class="${podkat.idKategorije}" name="podkategorije" type="checkbox" th:value="${podkat.idPodkategorije}">
                        </label>
                    </th:block>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Rad od kuce</label>
                <div class="col-8">
                    <select class="form-control" aria-label=".form-select-lg example" th:field="*{radOdKuce}" required>
                        <option value="true">Da</option>
                        <option value="false">Ne</option>
                    </select>
                </div>
            </div>


            <div class="form-group row">
                <label class="col-form-label col-4" hidden></label>
                <div class="hidden">
                    <select class="form-control" aria-label=".form-select-lg example" th:field="*{idOglasavaca}" required hidden>
                        <option th:value="${#request.userPrincipal.principal.korisnikId}">[[${#request.userPrincipal.principal.korisnikId}]]</option>
                    </select>
                </div>
            </div>


<!--            <div class="form-group row">-->
<!--                <label class="col-form-label col-4"></label>-->
<!--                <div class="col-8">-->
<!--                    <input type="hidden" th:value="${#request.userPrincipal.principal.korisnikId}" class="form-control" th:field="*{id_oglasavaca}" required minlength="3" maxlength="44"/>-->
<!--                </div>-->
<!--            </div>-->

            <div>
                <button type="submit" class="btn btn-primary">Postavi oglas!</button>
            </div>


        </div>

        </form>

    </div>
</body>
</html>