oss-vaja1/js/rezervacija.js

// Pridobivanje HTML elementov querySelector izbere prvi element s tem classom ali id-jem
const obrazec = document.querySelector("#obrazec_rezervacija");
const ime = document.querySelector("#ime-priimek");
const napakaIme = document.querySelector("#napaka-ime");
const email = document.querySelector("#email");
const napakaEmail = document.querySelector("#napaka-email");
const telefon = document.querySelector("#telefon-st");
const napakaTelefon = document.querySelector("#napaka-telefon");
const datum = document.querySelector("#datum-obiska");
const napakaDatum = document.querySelector("#napaka-datum");

function preveriIme() { // Preveri, ali sta ime in priimek pravilno vnesena.
    const vrednost = ime.value.trim(); //odstrani presledke na zacetku in koncu
    const besede = vrednost.split(/\s+/); //razreze ime pri presledkih da dobimo tabelo (array)

    if (besede.length !== 2 || besede[0].length < 2 || besede[1].length < 2) { //ce tabela nima dveh elementov, ali ima vsak element vsaj dve crki
        napakaIme.textContent = "Vnesite ime in priimek, vsak naj vsebuje vsaj dve črki."; //ce je if true izpise napako
        ime.classList.add("napacno"); //v tem primeru id-ju ime-priimek doda napacno
        return false; //in nam vrne kot rezultat funkcije false
    }
    else {
        napakaIme.textContent = ""; //ce ni napak se span ne izpise
        ime.classList.remove("napacno"); //odstrani se napacno pri id ime-priimek
        return true; //vrne funkcija true
    }
}


function preveriEmail() {
    const vrednost = email.value.trim(); //spet odstranim presledke na zacetku in koncu
    const vzorec = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; //definiramo kako mora izgledati mail; ^ pomeni zacetek besetila, [^\s@]- pomeni da je to besedilo 1 ali vec znakov ki niso @ ali presledek, @[^\s@]- zahteva obvezno @ in za tem znakom vsaj 1 znak ki ni presledek ali @, \. - obvezna pika, za piko spet besedilo ki ni oresledek ali @, $ pomeni konec besedila
    // ce nek eklement ustreza vzorcu, vzprec=true, drugace pa false, https://www.w3schools.com/js/js_regexp.asp
    if (!vzorec.test(vrednost)) { //ce je vrednost vzorca NE true= torej false
        napakaEmail.textContent = "Vnesite veljaven e-poštni naslov."; //izpise se span
        email.classList.add("napacno");
        return(false);
    }
    else {
        napakaEmail.textContent = "";
        email.classList.remove("napacno");
        return(true);
    }
}

function preveriTelefon (){
    const vrednost = telefon.value.trim();
    const vzorec = /^0\d{2} ?\d{3} ?\d{3}$/; //https://www.w3schools.com/js/js_regexp.asp, spet ^pomeni zacetek besedila, obvezno 0, \d{2} za ničko obvezno dve stevili (d- digit), ?- neobvezen presledek, \d{3} 3 stevila, $ zakljucek besedila
    if (!vzorec.test(vrednost)) {
        napakaTelefon.textContent = "Vnesite veljavno telefonsko številko.";
        telefon.classList.add("napacno");
        return false;
    }

    else {
        napakaTelefon.textContent = "";
        telefon.classList.remove("napacno");
        return true;
    }
}

// Preveri pravilnost datuma rezervacije.
function preveriDatum() {
    const vrednost = datum.value; //elementu doda trenutno vrednost elementa value, torej tisto kar uporabnik izbere, npr. 4.november 2026 bi bilo 2026-11-04, vrne vrednost v obliki string 
    const izbraniDatum = new Date(vrednost + "T00:00:00"); //tukaj pa iz stringa spremenim v pobjekt date, pac uporabno za datum
    const danVTednu = izbraniDatum.getDay(); // s tem pa ugotovimo kater dan v tednu je to, 0-nedelja, 1-ponedeljek, 2-torek... za cel teden, da bom lahko kasneje napisala da smo v torek zaprti

    const danes = new Date(); // elementu danes dodam vrednost današnjega datuma
    danes.setHours(0, 0, 0, 0); //in nastavim čas na polnoč, vse datume primerjam ob polnoči da slučajnp to ne bi vpivalo na preverjanje ali je datum v preteklosti

    if (vrednost === "") { //če je vrednost prazna potem
        napakaDatum.textContent = "Izberite datum rezervacije.";
    }
    else if (danes > izbraniDatum) { //če je današnji datum večji oz kasnejši od izbranega potem
        napakaDatum.textContent = "Datum ne sme biti v preteklosti.";
    }
    else if (danVTednu === 2) { //če je izbran dan v tednu torek
        napakaDatum.textContent = "Ob torkih je restavracija zaprta.";
    }
    else {
        napakaDatum.textContent = "";
        datum.classList.remove("napacno");
        return true; //če je datum prvilen se funkcija konča tukaj
    }

    datum.classList.add("napacno");
    return false; //zapisano na koncu da se izognemo ponavljanju, ker do tega dela pridemo samo če je datum neustrezen
}


// Preverjanje med tipkanjem
ime.addEventListener("input", preveriIme); //funkcija se opravi ko zacnemo pisati v ime, se zacne izvajati funkcija
email.addEventListener("input", preveriEmail);
telefon.addEventListener("input", preveriTelefon);
datum.addEventListener("select", preveriDatum); //tu imam select ker datum izbira ne vpisuje tako da je bolj logicno

obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izvede preverjanje
    event.preventDefault(); //preprecimo default preverjsnje ob submitu

    const imePravilno = preveriIme(); //elementu imePravilno dodamo vrednost true/false
    const emailPravilno = preveriEmail();
    const telefonPravilno = preveriTelefon();
    const datumPravilno = preveriDatum();

    if (imePravilno && emailPravilno && telefonPravilno && datumPravilno) {
            //se  morem preveriti ostale vrednosti
    }
});