<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Izmena podataka</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>Izmenite svoje podatke</h1>



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


            <div class="form-group row">
                <label class="col-form-label col-4">Ime:</label>
                <div class="col-8">
                    <input type="text" name="ime" th:field="*{ime}" class="form-control" placeholder="Unesite 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 type="text" name="prezime" th:field="*{prezime}" class="form-control" placeholder="Unesite 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 type="email" name="email" th:field="*{email}" class="form-control" placeholder="Unesite e-mail" required minlength="3" maxlength="44">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-4">Telefon:</label>
                <div class="col-8">
                    <input type="text" name="telefon" th:field="*{telefon}" class="form-control" placeholder="Unesit broj telefona" required minlength="2" 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" name="username" th:field="*{username}" class="form-control" placeholder="Unesite korisnicko ime" required minlength="3" maxlength="44">
                </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>
            <div class="form-group row">
                <label class="col-form-label col-4">Lozinka</label>
                <div class="col-8">
                    <input type="password" name="lozinka" th:field="*{lozinka}" class="form-control" placeholder="Unesite lozinku" required minlength="6" maxlength="44">
                </div>
            </div>

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

            <div>
                <button type="submit" class="btn btn-primary">Izmeni podatke</button>
            </div>


        </form>

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