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

<script>

    function formValidator(){

	var ime = document.getElementById('ime');
	var prezime = document.getElementById('prezime');
	var brojTelefona = document.getElementById('brojTelefona');

	console.log("usao");

	if(isAlphabet(ime, "Unesite samo slova za ime")){
		if(isAlphabet(prezime, "Unesite samo slova za prezime")){
			if(isNumeric(brojTelefona, "Unesite samo cifre za broj telefona")){
			    if(emailValidator(email,"Unesite validan email")){
			        return true;
			    }
			}
		}
	}

	    return false;
    }

    function isAlphabet(elem, helperMsg){
	var patt=new RegExp(/^[a-zA-Z]+$/);

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

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

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

    function emailValidator(elem, helperMsg){

	const emailExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

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

</script>

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


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

        <div class="m-3">

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

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

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

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



            <div class="form-group row">
                <label class="col-form-label col-4">Telefon</label>
                <div class="col-8">
                    <input id="brojTelefona" type="text" class="form-control" th:field="*{telefon}" required minlength="8" maxlength="12"/>
                </div>
            </div>



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

            <div class="form-group row">
                <label class="col-form-label col-4">Tip Korisnika</label>
                <div class="col-8">
                    <select class="form-control" aria-label=".form-select-lg example" th:field="*{idTipaKorisnika}" required>
                        <option value="">Izaberite vrstu naloga...</option>
                        <option value="4">Trazi dozvolu za administrativni nalog</option>
                        <option value="2">Poslodavac</option>
                        <option value="3">Nezaposleni</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Slika</label>
                <div class="col-8">
                    <input type="file" name="slikaFile" class="form-control" accept="image/jpeg, image/png, image/jpg"/>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">CV</label>
                <div class="col-8">
                    <input type="file" name="cvFile" class="form-control" accept="application/pdf"/>
                </div>
            </div>

            <p style="color:red" th:text="${validation}"></p>

            <div>
                <button type="submit" class="btn btn-primary">Registruj se</button>
            </div>

        </div>


        </form>

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