{"id":9465,"date":"2026-07-24T16:21:17","date_gmt":"2026-07-24T15:21:17","guid":{"rendered":"https:\/\/nsbi.org.rs\/?page_id=9465"},"modified":"2026-09-27T11:13:19","modified_gmt":"2026-09-27T10:13:19","slug":"0000-3","status":"publish","type":"page","link":"https:\/\/nsbi.org.rs\/sr\/0000-3","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"sr\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta name=\"robots\" content=\"noindex, nofollow\">\n  <title>NSBI &#8211; Interni Portal<\/title>\n  <style>\n    :root {\n      --nsbi-primary: #1a365d;    \n      --nsbi-accent: #00a8cc;     \n      --nsbi-accent-hover: #008ca8;\n      --nsbi-bg: #f8fafc;\n      --nsbi-card-bg: #ffffff;\n      --nsbi-text: #2d3748;\n      --nsbi-border: #e2e8f0;\n      --danger-color: #e53e3e;\n      --warning-bg: #fffbe3;\n      --warning-border: #fef08a;\n    }\n\n    body {\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      background-color: var(--nsbi-bg);\n      color: var(--nsbi-text);\n      margin: 0;\n      padding: 30px 15px;\n      display: flex;\n      justify-content: center;\n    }\n\n    .main-container {\n      width: 100%;\n      max-width: 800px;\n      background-color: var(--nsbi-card-bg);\n      border-radius: 12px;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n      border-top: 6px solid var(--nsbi-primary);\n      overflow: hidden;\n    }\n\n    .portal-header {\n      padding: 24px 24px 10px 24px;\n      text-align: center;\n    }\n\n    .portal-header h2 {\n      color: var(--nsbi-primary);\n      margin: 0 0 6px 0;\n      font-size: 24px;\n      font-weight: 700;\n    }\n\n    .portal-header p {\n      color: #64748b;\n      font-size: 14px;\n      margin: 0;\n    }\n\n    \/* --- TABOVI NAVIGACIJA --- *\/\n    .tab-navigation {\n      display: flex;\n      background-color: #f1f5f9;\n      border-bottom: 2px solid var(--nsbi-border);\n      overflow-x: auto;\n    }\n\n    .tab-btn {\n      flex: 1;\n      padding: 14px 16px;\n      background: none;\n      border: none;\n      outline: none;\n      font-size: 14px;\n      font-weight: 600;\n      color: #64748b;\n      cursor: pointer;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      border-bottom: 3px solid transparent;\n      user-select: none;\n    }\n\n    .tab-btn:hover {\n      color: var(--nsbi-primary);\n      background-color: #e2e8f0;\n    }\n\n    .tab-btn.active {\n      color: var(--nsbi-primary);\n      border-bottom: 3px solid var(--nsbi-accent);\n      background-color: #ffffff;\n    }\n\n    .tab-content {\n      display: none;\n      padding: 24px;\n    }\n\n    .tab-content.active {\n      display: block;\n    }\n\n    \/* --- OP\u0160TI FORMULAR STILOVI --- *\/\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .grid-2 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n\n    @media (max-width: 600px) {\n      .grid-2 {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    label {\n      display: block;\n      margin-bottom: 6px;\n      font-weight: 600;\n      font-size: 14px;\n      color: var(--nsbi-primary);\n    }\n\n    input:not([type=\"checkbox\"]), select, textarea {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid var(--nsbi-border);\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      background-color: #ffffff !important;\n      color: #1a202c !important;\n    }\n\n    option:disabled {\n      color: #a0aec0;\n      background-color: #f1f5f9;\n    }\n\n    input::placeholder, textarea::placeholder {\n      color: #a0aec0;\n    }\n\n    input:focus:not([type=\"checkbox\"]), select:focus, textarea:focus {\n      outline: none;\n      border-color: var(--nsbi-accent);\n      box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.15);\n    }\n\n    input[readonly] {\n      background-color: #f1f5f9 !important;\n      color: #64748b !important;\n      cursor: not-allowed;\n    }\n\n    .dynamic-section {\n      display: none;\n    }\n\n    .dynamic-section.active {\n      display: block;\n    }\n\n    .section-box {\n      background-color: #f8fafc;\n      padding: 16px;\n      border-radius: 8px;\n      border: 1px dashed var(--nsbi-border);\n      margin-bottom: 20px;\n    }\n\n    \/* --- CHECKBOXI --- *\/\n    .checkbox-container {\n      display: flex !important;\n      flex-direction: row !important;\n      align-items: center !important;\n      gap: 12px !important;\n      background-color: #f0f7ff;\n      border: 1px solid #cbd5e1;\n      padding: 14px;\n      border-radius: 8px;\n      margin-top: 12px;\n    }\n\n    .checkbox-container input[type=\"checkbox\"] {\n      -webkit-appearance: none;\n      appearance: none;\n      background-color: #ffffff !important;\n      margin: 0 !important;\n      width: 20px !important;\n      height: 20px !important;\n      border: 2px solid var(--nsbi-primary) !important;\n      border-radius: 4px;\n      display: grid;\n      place-content: center;\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: all 0.2s ease-in-out;\n    }\n\n    .checkbox-container input[type=\"checkbox\"]::before {\n      content: \"\";\n      width: 10px;\n      height: 10px;\n      transform: scale(0);\n      transition: 120ms transform ease-in-out;\n      background-color: var(--nsbi-primary);\n      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n    }\n\n    .checkbox-container input[type=\"checkbox\"]:checked::before {\n      transform: scale(1);\n    }\n\n    .checkbox-container input[type=\"checkbox\"]:checked {\n      background-color: #e2e8f0 !important;\n    }\n\n    .checkbox-container label {\n      display: inline !important;\n      font-size: 13px;\n      color: var(--nsbi-primary);\n      font-weight: 600;\n      margin: 0 !important;\n      cursor: pointer;\n      line-height: 1.4;\n    }\n\n    \/* TABELA TREBOVANJA *\/\n    .trebovanje-table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 12px;\n      font-size: 14px;\n    }\n\n    .trebovanje-table th, .trebovanje-table td {\n      border: 1px solid var(--nsbi-border);\n      padding: 8px 12px;\n      text-align: left;\n      color: #1a202c;\n    }\n\n    .trebovanje-table th {\n      background-color: #edf2f7;\n      color: var(--nsbi-primary);\n    }\n\n    .trebovanje-table input[type=\"number\"] {\n      width: 70px;\n      padding: 4px 8px;\n    }\n\n    .btn-add {\n      background-color: var(--nsbi-primary);\n      color: white;\n      border: none;\n      padding: 10px 16px;\n      border-radius: 6px;\n      font-weight: 600;\n      cursor: pointer;\n      margin-top: 8px;\n    }\n\n    .btn-add:hover { background-color: #0f2340; }\n\n    .btn-remove {\n      background-color: var(--danger-color);\n      color: white;\n      border: none;\n      padding: 4px 8px;\n      border-radius: 4px;\n      cursor: pointer;\n      font-weight: bold;\n    }\n\n    .btn-submit {\n      width: 100%;\n      background-color: var(--nsbi-accent);\n      color: white;\n      padding: 14px;\n      border: none;\n      border-radius: 6px;\n      font-size: 16px;\n      font-weight: 700;\n      cursor: pointer;\n      transition: background-color 0.2s, transform 0.1s;\n      margin-top: 10px;\n    }\n\n    .btn-submit:hover { background-color: var(--nsbi-accent-hover); }\n\n    \/* --- STILOVI ZA TEKSTUALNE TABOVE --- *\/\n    .info-card {\n      line-height: 1.6;\n      color: #334155;\n    }\n\n    .info-card h3 {\n      color: var(--nsbi-primary);\n      margin-top: 0;\n      font-size: 18px;\n      border-bottom: 2px solid #f1f5f9;\n      padding-bottom: 8px;\n    }\n\n    .info-card ul, .info-card ol {\n      padding-left: 20px;\n      margin-bottom: 20px;\n    }\n\n    .info-card li {\n      margin-bottom: 10px;\n    }\n\n    .alert-box {\n      background-color: #f0fdf4;\n      border-left: 4px solid #22c55e;\n      padding: 12px 16px;\n      margin-bottom: 20px;\n      border-radius: 0 6px 6px 0;\n      font-size: 14px;\n    }\n\n    .alert-box.danger {\n      background-color: #fef2f2;\n      border-left-color: #ef4444;\n    }\n\n    .alert-box.warning {\n      background-color: #fffbeb;\n      border-left-color: #f59e0b;\n    }\n\n    .calendar-wrapper {\n      margin-top: 20px;\n      border-radius: 8px;\n      overflow: hidden;\n      border: 1px solid var(--nsbi-border);\n      box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    }\n\n    .calendar-wrapper iframe {\n      width: 100%;\n      height: 500px;\n      border: none;\n    }\n\n    .text-subtle {\n      color: #64748b;\n      font-size: 13px;\n      font-weight: normal;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"main-container\">\n  <div class=\"portal-header\">\n    <h2>NSBI Interni Portal<\/h2>\n    <p>Sistem za rezervaciju, prijavu kvarova i trebovanje<\/p>\n  <\/div>\n\n  <!-- NAVIGACIJA TABOVA -->\n  <div class=\"tab-navigation\">\n    <button type=\"button\" class=\"tab-btn active\" data-tab=\"tab-forma\">\ud83d\udcdd Forma za zahtev<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-uputstvo\">\ud83d\udcd6 Uputstvo za rezervaciju<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-pravila-rezervacije\">\ud83d\udcc5 Pravila i Kalendar<\/button>\n    <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-pravila-koriscenja\">\u26a0\ufe0f Pravila kori\u0161\u0107enja<\/button>\n  <\/div>\n\n  <!-- TAB 1: FORMA -->\n  <div id=\"tab-forma\" class=\"tab-content active\">\n    <form id=\"nsbiForm\" action=\"send.php\" method=\"POST\">\n      <input type=\"hidden\" id=\"trebovaneStavkeInput\" name=\"trebovane_stavke_json\" value=\"[]\">\n\n      <!-- RED 1: Podnosilac i Email -->\n      <div class=\"grid-2 form-group\">\n        <div>\n          <label for=\"clanSelect\">Ime i prezime:<\/label>\n          <select id=\"clanSelect\" name=\"podnosilac\" required>\n            <option value=\"\">&#8212; Izaberite ime &#8212;<\/option>\n            <option value=\"Marko Mazalica\">Marko Mazalica<\/option>\n            <option value=\"Agne\u0161 Asodi\">Agne\u0161 Asodi<\/option>\n            <option value=\"Vladimir Zdravkovi\u0107\">Vladimir Zdravkovi\u0107<\/option>\n            <option value=\"\u0110or\u0111e Mili\u0107\">\u0110or\u0111e Mili\u0107<\/option>\n            <option value=\"Branislava Simovi\u0107\">Branislava Simovi\u0107<\/option>\n            <option value=\"Du\u0161an Pe\u0161i\u0107\">Du\u0161an Pe\u0161i\u0107<\/option>\n            <option value=\"Du\u0161an Jovi\u0107\">Du\u0161an Jovi\u0107<\/option>\n            <option value=\"Vladimir Kecman\">Vladimir Kecman<\/option>\n            <option value=\"An\u0111ela Radun\">An\u0111ela Radun<\/option>\n            <option value=\"Bo\u0161ko Tomi\u0107\">Bo\u0161ko Tomi\u0107<\/option>\n            <option value=\"Jasna Tomasovi\u0107\">Jasna Tomasovi\u0107<\/option>\n            <option value=\"Nata\u0161a Subotin\">Nata\u0161a Subotin<\/option>\n          <\/select>\n        <\/div>\n\n        <div>\n          <label for=\"email\">E-mail adresa:<\/label>\n          <input type=\"email\" id=\"email\" name=\"email\" readonly placeholder=\"Auto-popuna...\" required>\n        <\/div>\n      <\/div>\n\n      <!-- RED 2: Tip zahteva -->\n      <div class=\"form-group\">\n        <label for=\"tipZahteva\">Tip zahteva:<\/label>\n        <select id=\"tipZahteva\" name=\"tip_zahteva\" required>\n          <option value=\"\">&#8212; Izaberite tip &#8212;<\/option>\n          <option value=\"Kvar\">Prijava kvara ili o\u0161te\u0107enja<\/option>\n          <option value=\"Trebovanje\">Trebovanje opreme \/ materijala<\/option>\n          <option value=\"Rezervacija\">Rezervacija prostora<\/option>\n          <option value=\"Rezervacija opreme\">Rezervacija opreme<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- PROSTOR ZA KVAR -->\n      <div id=\"poljeProstorKvar\" class=\"dynamic-section form-group\">\n        <label for=\"prostorKvar\">Izaberi prostor za prijavu kvara:<\/label>\n        <select id=\"prostorKvar\" name=\"prostor_kvar\">\n          <option value=\"\">&#8212; Izaberite prostor &#8212;<\/option>\n          <option value=\"Kuhinja \/ predsoblje\">Kuhinja \/ predsoblje<\/option>\n          <option value=\"Kancelarija I\">Kancelarija I<\/option>\n          <option value=\"Dnevni boravak\">Dnevni boravak<\/option>\n          <option value=\"Toalet\">Toalet<\/option>\n          <option value=\"Kancelarija II\">Kancelarija II<\/option>\n          <option value=\"Ostava \/ magacin\">Ostava \/ magacin<\/option>\n          <option value=\"Dvori\u0161te\">Dvori\u0161te<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- KATEGORIJA ZA TREBOVANJE -->\n      <div id=\"poljeKategorijaTrebovanja\" class=\"dynamic-section form-group\">\n        <label for=\"kategorijaTrebovanja\">Kategorija trebovanja:<\/label>\n        <select id=\"kategorijaTrebovanja\" name=\"kategorija_trebovanja\">\n          <option value=\"\">&#8212; Izaberite kategoriju &#8212;<\/option>\n          <option value=\"kancelarijski\">Kancelarijski materijal<\/option>\n          <option value=\"higijena\">Odr\u017eavanje higijene<\/option>\n          <option value=\"osvezenje\">Kuhinja &#8211; osve\u017eenje<\/option>\n          <option value=\"kuhinja_oprema\">Kuhinja &#8211; oprema<\/option>\n          <option value=\"it_oprema\">IT i tehni\u010dka oprema<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- SEKCIJA: DETALJI KVARA -->\n      <div id=\"sekcijaKvarDetalji\" class=\"dynamic-section section-box\">\n        <div class=\"grid-2 form-group\">\n          <div>\n            <label for=\"vrstaKvara\">Vrsta kvara:<\/label>\n            <select id=\"vrstaKvara\" name=\"vrsta_kvara\">\n              <option value=\"\">&#8212; Izaberite vrstu kvara &#8212;<\/option>\n              <option value=\"Vodovod\">Vodovod<\/option>\n              <option value=\"Kanalizacija\">Kanalizacija<\/option>\n              <option value=\"El. instalacije\">El. instalacije<\/option>\n              <option value=\"Vrata \/ Prozori\">Vrata \/ Prozori<\/option>\n              <option value=\"Oprema \/ Ure\u0111aji\">Oprema \/ Ure\u0111aji<\/option>\n              <option value=\"Drugo\">Drugo<\/option>\n            <\/select>\n          <\/div>\n\n          <div id=\"poljeDrugoKvar\" class=\"dynamic-section\">\n            <label for=\"drugoKvarOpis\">Navedite vrstu kvara:<\/label>\n            <input type=\"text\" id=\"drugoKvarOpis\" name=\"drugo_kvar_opis\" placeholder=\"Npr. Molerski radovi, brava...\">\n          <\/div>\n        <\/div>\n\n        <div class=\"form-group\" style=\"margin-bottom: 0;\">\n          <label for=\"opisKvara\">Detaljan opis kvara ili o\u0161te\u0107enja:<\/label>\n          <textarea id=\"opisKvara\" name=\"opis_kvara\" rows=\"3\" placeholder=\"Opi\u0161ite ta\u010dan problem...\"><\/textarea>\n        <\/div>\n      <\/div>\n\n      <!-- SEKCIJA: TREBOVANJE -->\n      <div id=\"sekcijaTrebovanjeDetalji\" class=\"dynamic-section section-box\">\n        <div class=\"grid-2 form-group\">\n          <div>\n            <label for=\"artikalSelect\">Izaberite stavku:<\/label>\n            <select id=\"artikalSelect\">\n              <option value=\"\">&#8212; Prvo izaberite kategoriju iznad &#8212;<\/option>\n            <\/select>\n          <\/div>\n\n          <div id=\"poljeDetaljiArtikla\" class=\"dynamic-section\">\n            <label for=\"detaljiArtikla\">Opis \/ detalji <span class=\"text-subtle\">(opciono)<\/span>:<\/label>\n            <input type=\"text\" id=\"detaljiArtikla\" placeholder=\"Npr. Black &#038; Easy, samo crni, 200gr...\">\n          <\/div>\n        <\/div>\n\n        <div class=\"grid-2 form-group\">\n          <div>\n            <label for=\"kolicinaArtikla\">Koli\u010dina (kom\/pak):<\/label>\n            <input type=\"number\" id=\"kolicinaArtikla\" min=\"1\" value=\"1\">\n          <\/div>\n          <div style=\"display: flex; align-items: flex-end;\">\n            <button type=\"button\" class=\"btn-add\" id=\"btnDodajStavku\">+ Dodaj na spisak<\/button>\n          <\/div>\n        <\/div>\n\n        <div style=\"margin-top: 20px;\">\n          <label>Spisak trebovanih artikala:<\/label>\n          <table class=\"trebovanje-table\" id=\"tabelaStavki\">\n            <thead>\n              <tr>\n                <th>Stavka i opis<\/th>\n                <th style=\"width: 90px;\">Koli\u010dina<\/th>\n                <th style=\"width: 50px; text-align: center;\">Akcija<\/th>\n              <\/tr>\n            <\/thead>\n            <tbody id=\"tabelaTelo\">\n              <tr id=\"prazanRed\">\n                <td colspan=\"3\" style=\"text-align: center; color: #94a3b8;\">Niste dodali nijednu stavku na spisak.<\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/div>\n\n      <!-- SEKCIJA: REZERVACIJA PROSTORA I OPREME -->\n      <div id=\"sekcijaRezervacijaDetalji\" class=\"dynamic-section section-box\">\n        \n        <!-- Prostor -->\n        <div class=\"form-group dynamic-section\" id=\"poljeProstorRezervacija\">\n          <label for=\"prostorRezervacija\">Prostor koji rezervi\u0161ete:<\/label>\n          <select id=\"prostorRezervacija\" name=\"prostor_rezervacija\">\n            <option value=\"\">&#8212; Izaberite prostor &#8212;<\/option>\n            <option value=\"Kancelarija I\" disabled>Kancelarija I (Zauzeta)<\/option>\n            <option value=\"Kancelarija II\">Kancelarija II<\/option>\n            <option value=\"Dnevni boravak\">Dnevni boravak<\/option>\n            <option value=\"Radionica\">Radionica<\/option>\n            <option value=\"Celokupan prostor NSBI\">Celokupan prostor NSBI<\/option>\n          <\/select>\n        <\/div>\n\n        <div class=\"grid-2 form-group\">\n          <div>\n            <label for=\"datumRezervacije\">Datum rezervacije:<\/label>\n            <input type=\"date\" id=\"datumRezervacije\" name=\"datum_rezervacije\">\n          <\/div>\n          <div>\n            <div class=\"grid-2\" style=\"gap: 8px;\">\n              <div>\n                <label for=\"vremeOd\">Vreme OD:<\/label>\n                <select id=\"vremeOd\" name=\"vreme_od\">\n                  <option value=\"\">&#8212; OD &#8212;<\/option>\n                  <option value=\"08:00\">08:00<\/option>\n                  <option value=\"08:30\">08:30<\/option>\n                  <option value=\"09:00\">09:00<\/option>\n                  <option value=\"09:30\">09:30<\/option>\n                  <option value=\"10:00\">10:00<\/option>\n                  <option value=\"10:30\">10:30<\/option>\n                  <option value=\"11:00\">11:00<\/option>\n                  <option value=\"11:30\">11:30<\/option>\n                  <option value=\"12:00\">12:00<\/option>\n                  <option value=\"12:30\">12:30<\/option>\n                  <option value=\"13:00\">13:00<\/option>\n                  <option value=\"13:30\">13:30<\/option>\n                  <option value=\"14:00\">14:00<\/option>\n                  <option value=\"14:30\">14:30<\/option>\n                  <option value=\"15:00\">15:00<\/option>\n                  <option value=\"15:30\">15:30<\/option>\n                  <option value=\"16:00\">16:00<\/option>\n                  <option value=\"16:30\">16:30<\/option>\n                  <option value=\"17:00\">17:00<\/option>\n                  <option value=\"17:30\">17:30<\/option>\n                  <option value=\"18:00\">18:00<\/option>\n                  <option value=\"18:30\">18:30<\/option>\n                  <option value=\"19:00\">19:00<\/option>\n                  <option value=\"19:30\">19:30<\/option>\n                  <option value=\"20:00\">20:00<\/option>\n                  <option value=\"20:30\">20:30<\/option>\n                <\/select>\n              <\/div>\n              <div>\n                <label for=\"vremeDo\">Vreme DO:<\/label>\n                <select id=\"vremeDo\" name=\"vreme_do\">\n                  <option value=\"\">&#8212; DO &#8212;<\/option>\n                  <option value=\"08:30\">08:30<\/option>\n                  <option value=\"09:00\">09:00<\/option>\n                  <option value=\"09:30\">09:30<\/option>\n                  <option value=\"10:00\">10:00<\/option>\n                  <option value=\"10:30\">10:30<\/option>\n                  <option value=\"11:00\">11:00<\/option>\n                  <option value=\"11:30\">11:30<\/option>\n                  <option value=\"12:00\">12:00<\/option>\n                  <option value=\"12:30\">12:30<\/option>\n                  <option value=\"13:00\">13:00<\/option>\n                  <option value=\"13:30\">13:30<\/option>\n                  <option value=\"14:00\">14:00<\/option>\n                  <option value=\"14:30\">14:30<\/option>\n                  <option value=\"15:00\">15:00<\/option>\n                  <option value=\"15:30\">15:30<\/option>\n                  <option value=\"16:00\">16:00<\/option>\n                  <option value=\"16:30\">16:30<\/option>\n                  <option value=\"17:00\">17:00<\/option>\n                  <option value=\"17:30\">17:30<\/option>\n                  <option value=\"18:00\">18:00<\/option>\n                  <option value=\"18:30\">18:30<\/option>\n                  <option value=\"19:00\">19:00<\/option>\n                  <option value=\"19:30\">19:30<\/option>\n                  <option value=\"20:00\">20:00<\/option>\n                  <option value=\"20:30\">20:30<\/option>\n                  <option value=\"21:00\">21:00<\/option>\n                <\/select>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"form-group\">\n          <label for=\"potrebnaOprema\" id=\"labelaOprema\">Potrebna oprema?<\/label>\n          <select id=\"potrebnaOprema\" name=\"potrebna_oprema\">\n            <option value=\"Nije potrebna oprema\">&#8212; Izaberite opremu &#8212;<\/option>\n            <option value=\"Laptop\">Laptop<\/option>\n            <option value=\"Projektor\">Projektor<\/option>\n            <option value=\"Platno\">Platno<\/option>\n            <option value=\"\u0160tampa\u010d\">\u0160tampa\u010d<\/option>\n            <option value=\"Zvu\u010dnik\">Zvu\u010dnik<\/option>\n            <option value=\"Mikrofon\">Mikrofon<\/option>\n            <option value=\"Megafon\">Megafon<\/option>\n            <option value=\"Kamera\">Kamera<\/option>\n            <option value=\"Bubice\">Bubice<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- Napomena -->\n        <div class=\"form-group dynamic-section\" id=\"poljeSvrhaRezervacije\" style=\"margin-bottom: 0;\">\n          <label for=\"svrhaRezervacije\">Svrha \/ Napomena:<\/label>\n          <textarea id=\"svrhaRezervacije\" name=\"svrha_rezervacije\" rows=\"3\" placeholder=\"Npr. Sastanak projektnog tima, radionica sa korisnicima...\"><\/textarea>\n        <\/div>\n\n        <!-- Checkbox 1: Odgovornost za opremu -->\n        <div id=\"poljeOdgovornost\" class=\"checkbox-container dynamic-section\">\n          <input type=\"checkbox\" id=\"potvrdjujemOdgovornost\" name=\"potvrdjujem_odgovornost\">\n          <label for=\"potvrdjujemOdgovornost\">Potvr\u0111ujem da preuzimam potpunu odgovornost za preuzetu opremu i obavezujem se da je vratim u ispravnom stanju nakon kori\u0161\u0107enja.<\/label>\n        <\/div>\n\n        <!-- Checkbox 2: Odgovornost za prostor -->\n        <div id=\"poljeOdgovornostProstor\" class=\"checkbox-container dynamic-section\">\n          <input type=\"checkbox\" id=\"potvrdjujemOdgovornostProstor\" name=\"potvrdjujem_odgovornost_prostor\">\n          <label for=\"potvrdjujemOdgovornostProstor\">Potvr\u0111ujem da preuzimam potpunu odgovornost za kori\u0161\u0107enje prostora i obavezujem se da ga ostavim u urednom i \u010distom stanju.<\/label>\n        <\/div>\n\n        <!-- Checkbox 3: Pravila prostora -->\n        <div id=\"poljePravilaProstor\" class=\"checkbox-container dynamic-section\">\n          <input type=\"checkbox\" id=\"potvrdjujemPravilaProstor\" name=\"potvrdjujem_pravila_prostor\">\n          <label for=\"potvrdjujemPravilaProstor\">Potvr\u0111ujem da sam upoznat\/a sa pravilima kori\u0161\u0107enja prostora.<\/label>\n        <\/div>\n\n      <\/div>\n\n      <button type=\"submit\" id=\"submitBtn\" class=\"btn-submit\">Po\u0161alji zahtev<\/button>\n    <\/form>\n  <\/div>\n\n  <!-- TAB 2: UPUTSTVO ZA REZERVACIJU -->\n  <div id=\"tab-uputstvo\" class=\"tab-content info-card\">\n    <h3>\ud83d\udcd6 Vodi\u010d za rezervaciju prostora i opreme<\/h3>\n    <p>Kako biste uspe\u0161no podneli zahtev i izbegli preklapanje termina, molimo vas da ispratite slede\u0107e korake:<\/p>\n\n    <ol>\n      <li>\n        <strong>Provera dostupnosti:<\/strong> Pre slanja bilo kakvog zahteva, obavezno otvorite tab <em>&#8220;Pravila i Kalendar&#8221;<\/em> i uverite se da je \u017eeljena prostorija ili oprema slobodna u predvi\u0111enom terminu.\n      <\/li>\n      <li>\n        <strong>Popunjavanje forme:<\/strong> Izaberite va\u0161e ime sa liste (e-mail \u0107e se automatski u\u010ditati). U polju <em>&#8220;Tip zahteva&#8221;<\/em> izaberite da li rezervi\u0161ete prostor ili samo tehni\u010dku opremu.\n      <\/li>\n      <li>\n        <strong>Vremenski okvir:<\/strong> Unesite datum i ta\u010dne satnice (OD &#8211; DO). Ne zaboravite da prostor mora biti napustiti najkasnije do 21:00h.\n      <\/li>\n      <li>\n        <strong>Dodatne napomene:<\/strong> Ukoliko vam je pored prostora potrebna i specifi\u010dna oprema (npr. projektor ili zvu\u010dnici), izaberite je iz padaju\u0107eg menija.\n      <\/li>\n      <li>\n        <strong>Potvrda i slanje:<\/strong> Ozna\u010dite obavezna polja za saglasnost sa pravilima i odgovorno\u0161\u0107u, pa kliknite na dugme <em>&#8220;Po\u0161alji zahtev&#8221;<\/em>. Va\u0161a rezervacija \u0107e automatski biti zabele\u017eena i prosle\u0111ena.\n      <\/li>\n    <\/ol>\n\n    <div class=\"alert-box warning\">\n      \ud83d\udca1 <strong>Savet:<\/strong> Ako planirate doga\u0111aj za manje od 3 osobe ili dolazite u sklopu redovnih radnih aktivnosti tokom radnog vremena, zvani\u010dna rezervacija prostora vam nije potrebna!\n    <\/div>\n  <\/div>\n\n  <!-- TAB 3: PRAVILA REZERVACIJE I KALENDAR -->\n  <div id=\"tab-pravila-rezervacije\" class=\"tab-content info-card\">\n    <h3>\ud83d\udccc Osnovna pravila rezervacije<\/h3>\n    <ul>\n      <li><strong>Blagovremena prijava:<\/strong> Prostor se mora rezervisati <strong>najranije 24 \u010dasa pre<\/strong> predvi\u0111enog vremena kori\u0161\u0107enja, i to isklju\u010divo putem ove platforme.<\/li>\n      <li><strong>Broj u\u010desnika:<\/strong> Obavezno je napraviti rezervaciju ukoliko se tokom planirane aktivnosti u prostoru o\u010dekuje <strong>vi\u0161e od 3 osobe<\/strong>.<\/li>\n      <li><strong>Maksimalno radno vreme:<\/strong> Prostor se mora napustiti najkasnije do <strong>21:00 \u010dasa<\/strong> na dan rezervisanja. Nakon ovog vremena kori\u0161\u0107enje prostora nije dozvoljeno.<\/li>\n      <li><strong>Obavezna provera:<\/strong> Pre podno\u0161enja zahteva, u kalendaru ispod uvek proverite da li je \u017eeljeni termin slobodan.<\/li>\n    <\/ul>\n\n    <div class=\"alert-box\">\n      \u2139\ufe0f <strong>Kada rezervacija NIJE potrebna:<\/strong>\n      <ul style=\"margin: 5px 0 0 0; padding-left: 20px;\">\n        <li>Za kori\u0161\u0107enje prostora tokom redovnog radnog vremena.<\/li>\n        <li>Za redovan rad (za potrebe udru\u017eenja ili privatni rad).<\/li>\n        <li>Za sve aktivnosti kojima prisustvuje manje od 3 osobe.<\/li>\n      <\/ul>\n    <\/div>\n\n    <h3>\ud83d\udcc5 Kalendar zauzetosti prostora<\/h3>\n    <p class=\"text-subtle\">U nastavku mo\u017eete pregledati kalendar i uveriti se u slobodne termine:<\/p>\n    \n    <div class=\"calendar-wrapper\">\n      <!-- NAPOMENA: Zamenite VA\u0160_KALENDAR_ID sa ta\u010dnim e-mailom naloga ili ID-jem kalendara (npr. office@nsbi.org.rs) -->\n      <iframe data-src=\"https:\/\/calendar.google.com\/calendar\/embed?src=office%40nsbi.org.rs&#038;ctz=Europe%2FBelgrade\" style=\"border: 0\" width=\"800\" height=\"600\" frameborder=\"0\" scrolling=\"no\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"0\"><\/iframe>\n    <\/div>\n  <\/div>\n\n  <!-- TAB 4: PRAVILA KORI\u0160\u0106ENJA PROSTORA -->\n  <div id=\"tab-pravila-koriscenja\" class=\"tab-content info-card\">\n    <h3>\u26a0\ufe0f Odgovornost i ku\u0107ni red<\/h3>\n\n    <div class=\"alert-box danger\">\n      <strong>VA\u017dNA NAPOMENA O O\u0160TE\u0106ENJIMA:<\/strong> Prostor i opremu koristite na sopstvenu odgovornost i sa posebnom pa\u017enjom. Svako o\u0161te\u0107enje prostora (namerno ili slu\u010dajno), njegovih delova, inventara ili opreme <strong>bi\u0107e u potpunosti napla\u0107eno!<\/strong>\n    <\/div>\n\n    <ul style=\"list-style-type: square;\">\n      <li><strong>Prijava zate\u010denog stanja:<\/strong> Ako pri ulasku u prostor primetite da je ne\u0161to o\u0161te\u0107eno pre va\u0161eg dolaska, <strong>obavezno to fotografi\u0161i i odmah prijavi<\/strong> putem forme u Tabu 1 (Prijava kvara) \u2013 kako se o\u0161te\u0107enje ne bi pripisalo vama.<\/li>\n      <li><strong>Provera pri izlasku:<\/strong> Kada izlazi\u0161 iz prostora, obavezno proveri da su <strong>sva svetla uga\u0161ena<\/strong>, <strong>roletne spu\u0161tene<\/strong>, <strong>prozori zatvoreni<\/strong>, <strong>klime uga\u0161ene<\/strong>, <strong>bojler uga\u0161en<\/strong> i <strong>vrata dobro zatvorena i zaklju\u010dana (2x)<\/strong>.<\/li>\n      <li><strong>Kante i sme\u0107e:<\/strong> Ako izlazi\u0161 i vidi\u0161 da su kante za sme\u0107e pune, <strong>isprazni ih i zameni d\u017eakove<\/strong>.<\/li>\n      <li><strong>Redovno odr\u017eavanje:<\/strong> Kad god ima\u0161 vremena, <strong>po\u010disti \u0161ta god mo\u017ee\u0161 (pod, pra\u0161inu i sl.)<\/strong> \u2013 jer redovno odr\u017eavanje prostora omogu\u0107ava da on bude \u010dist i prijatan za sve koji ga koriste.<\/li>\n      <li><strong>Vra\u0107anje stvari na mesto:<\/strong> Sve \u0161to koristi\u0161 \u2013 vrati ta\u010dno tamo gde si na\u0161ao\/la. Alat iz radionice se <strong>STRIKTNO NE SME IZNOSITI VAN PROSTORA!<\/strong><\/li>\n      <li><strong>Kuhinja i higijena:<\/strong> Sudove nakon kori\u0161\u0107enja operi i slo\u017ei na svoje mesto, a tehniku vrati gde je stajala. Ako primeti\u0161 da nestaju zalihe (sapuni, toalet papir, kafa, \u010daj), dopuni ih ili po\u0161alji trebovanje.<\/li>\n      <li><strong>Kori\u0161\u0107enje opreme:<\/strong> Opremu i alat koristi sa posebnom pa\u017enjom. Pri preuzimanju opreme proveri u kakvom je stanju i tra\u017ei da se eventualna pre\u0111a\u0161nja o\u0161te\u0107enja zavedu u napomenu\/zapisnik.<\/li>\n      <li><strong>Kuhinja i osve\u017eenje:<\/strong> Prostor je stavljen na raspolaganje na volonterskom nivou. Kori\u0161\u0107enje kuhinje, aparata, kafa, \u010dajeva, sokova i grickalica je <strong>potpuno besplatno<\/strong>. Imaj to na umu, pa ukoliko si u mogu\u0107nosti, po\u017eeljno je ostaviti neku donaciju za dalja odr\u017eavanja!<\/li>\n    <\/ul>\n  <\/div>\n\n<\/div>\n\n<script>\n  \/\/ SIGURAN UPRAVLJA\u010c TABOVIMA\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const tabBtns = document.querySelectorAll(\".tab-btn\");\n    const tabContents = document.querySelectorAll(\".tab-content\");\n\n    tabBtns.forEach(btn => {\n      btn.addEventListener(\"click\", function() {\n        const targetTabId = this.getAttribute(\"data-tab\");\n\n        tabBtns.forEach(b => b.classList.remove(\"active\"));\n        tabContents.forEach(c => c.classList.remove(\"active\"));\n\n        this.classList.add(\"active\");\n        const targetContent = document.getElementById(targetTabId);\n        if (targetContent) {\n          targetContent.classList.add(\"active\");\n        }\n      });\n    });\n\n    \/\/ EVENT LISTENERI ZA FORMU\n    document.getElementById(\"clanSelect\").addEventListener(\"change\", popuniEmail);\n    document.getElementById(\"tipZahteva\").addEventListener(\"change\", promeniTipZahteva);\n    document.getElementById(\"prostorKvar\").addEventListener(\"change\", promeniProstorKvar);\n    document.getElementById(\"vrstaKvara\").addEventListener(\"change\", promeniVrstuKvara);\n    document.getElementById(\"kategorijaTrebovanja\").addEventListener(\"change\", promeniKategorijuTrebovanja);\n    document.getElementById(\"artikalSelect\").addEventListener(\"change\", promeniArtikal);\n    document.getElementById(\"btnDodajStavku\").addEventListener(\"click\", dodajUStavke);\n    document.getElementById(\"nsbiForm\").addEventListener(\"submit\", posaljiZahtev);\n  });\n\n  \/\/ --- LOGIKA FORME ---\n  const clanoviBaza = {\n    \"Marko Mazalica\": \"m.mazalica@nsbi.org.rs\",\n    \"Agne\u0161 Asodi\": \"agnes@nsbi.org.rs\",\n    \"Vladimir Zdravkovi\u0107\": \"vladimir@nsbi.org.rs\",\n    \"\u0110or\u0111e Mili\u0107\": \"dj.milic@nsbi.org.rs\",\n    \"Branislava Simovi\u0107\": \"b.simovic@nsbi.org.rs\",\n    \"Du\u0161an Pe\u0161i\u0107\": \"d.pesic@nsbi.org.rs\",\n    \"Du\u0161an Jovi\u0107\": \"d.jovic@nsbi.org.rs\",\n    \"Vladimir Kecman\": \"v.kecman@nsbi.org.rs\",\n    \"An\u0111ela Radun\": \"a.radun@nsbi.org.rs\",\n    \"Bo\u0161ko Tomi\u0107\": \"b.tomic@nsbi.org.rs\",\n    \"Jasna Tomasovi\u0107\": \"jasna@nsbi.org.rs\",\n    \"Nata\u0161a Subotin\": \"n.subotin@nsbi.org.rs\"\n  };\n\n  const opcijeTrebovanja = {\n    \"kancelarijski\": [\"Kopir papir\", \"Hemijske\", \"Stikeri\", \"Registratori\", \"Fascikle\", \"Sun\u0111eri za belu tablu\", \"Permanent markeri\", \"Markeri za belu tablu\", \"Koverte\", \"Nalozi (uplata, prenos, isplata)\", \"\u010ciode za cork tablu\", \"Magneti za belu tablu\", \"Flipchart papiri\", \"Drugo...\"],\n    \"higijena\": [\"Odma\u0161\u0107iva\u010d\", \"Deterd\u017eent za sudove\", \"Sun\u0111eri\", \"Magi\u010dne krpe\", \"Kuhinjske krpe\", \"Inox sun\u0111eri\", \"Te\u010dnost za stakla\", \"Cif\", \"Bref kuglice za WC\", \"Bref te\u010dnost\", \"Sona kiselina\", \"Drugo...\"],\n    \"osvezenje\": [\"Doma\u0107a kafa\", \"Instant kafa\", \"Espreso kafa\", \"\u010cajevi\", \"Obi\u010dna voda\", \"Mineralna voda\", \"Sokovi\", \"Cedevita\", \"Pivo\", \"Drugo...\"],\n    \"kuhinja_oprema\": [\"Tanjiri\", \"Plasti\u010dni tanjiri\", \"Papirni tanjiri\", \"\u010ca\u0161e\", \"Plasti\u010dne \u010da\u0161e\", \"Papirne \u010da\u0161e\", \"\u0160olje\", \"No\u017eevi\", \"Plasti\u010dni no\u017eevi\", \"Vilju\u0161ke\", \"Plasti\u010dne vilju\u0161ke\", \"Drugo...\"],\n    \"it_oprema\": [\"Kablovi \/ Adapteri\", \"Mi\u0161 \/ Tastatura\", \"Produ\u017eni kabl\", \"Drugo...\"]\n  };\n\n  let trebovaneStavke = [];\n\n  function popuniEmail() {\n    const izabranoIme = document.getElementById(\"clanSelect\").value;\n    document.getElementById(\"email\").value = clanoviBaza[izabranoIme] || \"\";\n  }\n\n  function promeniTipZahteva() {\n    const tip = document.getElementById(\"tipZahteva\").value;\n\n    const poljeProstorKvar = document.getElementById(\"poljeProstorKvar\");\n    const poljeKategorija = document.getElementById(\"poljeKategorijaTrebovanja\");\n    const sekcijaKvarDetalji = document.getElementById(\"sekcijaKvarDetalji\");\n    const sekcijaTrebovanjeDetalji = document.getElementById(\"sekcijaTrebovanjeDetalji\");\n    const sekcijaRezervacijaDetalji = document.getElementById(\"sekcijaRezervacijaDetalji\");\n    \n    const poljeProstorRezervacija = document.getElementById(\"poljeProstorRezervacija\");\n    const poljeSvrhaRezervacije = document.getElementById(\"poljeSvrhaRezervacije\");\n    const poljeOdgovornost = document.getElementById(\"poljeOdgovornost\");\n    const poljeOdgovornostProstor = document.getElementById(\"poljeOdgovornostProstor\");\n    const poljePravilaProstor = document.getElementById(\"poljePravilaProstor\");\n    const labelaOprema = document.getElementById(\"labelaOprema\");\n\n    poljeProstorKvar.classList.remove(\"active\");\n    poljeKategorija.classList.remove(\"active\");\n    sekcijaKvarDetalji.classList.remove(\"active\");\n    sekcijaTrebovanjeDetalji.classList.remove(\"active\");\n    sekcijaRezervacijaDetalji.classList.remove(\"active\");\n    poljeProstorRezervacija.classList.remove(\"active\");\n    poljeSvrhaRezervacije.classList.remove(\"active\");\n    poljeOdgovornost.classList.remove(\"active\");\n    poljeOdgovornostProstor.classList.remove(\"active\");\n    poljePravilaProstor.classList.remove(\"active\");\n\n    setRequired([\"prostorKvar\", \"vrstaKvara\", \"drugoKvarOpis\", \"opisKvara\", \"kategorijaTrebovanja\", \"prostorRezervacija\", \"datumRezervacije\", \"vremeOd\", \"vremeDo\", \"potvrdjujemOdgovornost\", \"potvrdjujemOdgovornostProstor\", \"potvrdjujemPravilaProstor\", \"potrebnaOprema\"], false);\n\n    if (tip === \"Kvar\") {\n      poljeProstorKvar.classList.add(\"active\");\n      document.getElementById(\"prostorKvar\").required = true;\n      promeniProstorKvar();\n    } else if (tip === \"Trebovanje\") {\n      poljeKategorija.classList.add(\"active\");\n      document.getElementById(\"kategorijaTrebovanja\").required = true;\n      promeniKategorijuTrebovanja();\n    } else if (tip === \"Rezervacija\") {\n      sekcijaRezervacijaDetalji.classList.add(\"active\");\n      poljeProstorRezervacija.classList.add(\"active\");\n      poljeSvrhaRezervacije.classList.add(\"active\");\n      poljeOdgovornostProstor.classList.add(\"active\");\n      poljePravilaProstor.classList.add(\"active\");\n      labelaOprema.textContent = \"Potrebna oprema?\";\n      setRequired([\"prostorRezervacija\", \"datumRezervacije\", \"vremeOd\", \"vremeDo\", \"potvrdjujemOdgovornostProstor\", \"potvrdjujemPravilaProstor\"], true);\n    } else if (tip === \"Rezervacija opreme\") {\n      sekcijaRezervacijaDetalji.classList.add(\"active\");\n      poljeOdgovornost.classList.add(\"active\");\n      labelaOprema.textContent = \"Vrsta opreme:\";\n      setRequired([\"datumRezervacije\", \"vremeOd\", \"vremeDo\", \"potvrdjujemOdgovornost\", \"potrebnaOprema\"], true);\n    }\n  }\n\n  function promeniProstorKvar() {\n    const prostor = document.getElementById(\"prostorKvar\").value;\n    const sekcijaKvarDetalji = document.getElementById(\"sekcijaKvarDetalji\");\n\n    if (prostor && document.getElementById(\"tipZahteva\").value === \"Kvar\") {\n      sekcijaKvarDetalji.classList.add(\"active\");\n      setRequired([\"vrstaKvara\", \"opisKvara\"], true);\n      promeniVrstuKvara();\n    } else {\n      sekcijaKvarDetalji.classList.remove(\"active\");\n      setRequired([\"vrstaKvara\", \"drugoKvarOpis\", \"opisKvara\"], false);\n    }\n  }\n\n  function promeniVrstuKvara() {\n    const vrsta = document.getElementById(\"vrstaKvara\").value;\n    const poljeDrugo = document.getElementById(\"poljeDrugoKvar\");\n    const unosDrugo = document.getElementById(\"drugoKvarOpis\");\n\n    if (vrsta === \"Drugo\") {\n      poljeDrugo.classList.add(\"active\");\n      unosDrugo.required = true;\n    } else {\n      poljeDrugo.classList.remove(\"active\");\n      unosDrugo.required = false;\n      unosDrugo.value = \"\";\n    }\n  }\n\n  function promeniKategorijuTrebovanja() {\n    const kat = document.getElementById(\"kategorijaTrebovanja\").value;\n    const sekcijaTrebovanjeDetalji = document.getElementById(\"sekcijaTrebovanjeDetalji\");\n    const artikalSelect = document.getElementById(\"artikalSelect\");\n\n    artikalSelect.innerHTML = '<option value=\"\">-- Izaberite stavku --<\/option>';\n\n    if (kat && opcijeTrebovanja[kat]) {\n      sekcijaTrebovanjeDetalji.classList.add(\"active\");\n      opcijeTrebovanja[kat].forEach(stavka => {\n        const opt = document.createElement(\"option\");\n        opt.value = stavka;\n        opt.textContent = stavka;\n        artikalSelect.appendChild(opt);\n      });\n      promeniArtikal();\n    } else {\n      sekcijaTrebovanjeDetalji.classList.remove(\"active\");\n    }\n  }\n\n  function promeniArtikal() {\n    const artikal = document.getElementById(\"artikalSelect\").value;\n    const poljeDetalji = document.getElementById(\"poljeDetaljiArtikla\");\n    const unosDetalji = document.getElementById(\"detaljiArtikla\");\n\n    if (artikal) {\n      poljeDetalji.classList.add(\"active\");\n      if (artikal === \"Drugo...\") {\n        unosDetalji.placeholder = \"Npr. Mre\u017eni kabl, specifi\u010dna krema...\";\n      } else {\n        unosDetalji.placeholder = \"Npr. Black & Easy, samo crni, 200gr...\";\n      }\n    } else {\n      poljeDetalji.classList.remove(\"active\");\n      unosDetalji.value = \"\";\n    }\n  }\n\n  function dodajUStavke() {\n    const artikalSelect = document.getElementById(\"artikalSelect\");\n    let naziv = artikalSelect.value;\n    const detalji = document.getElementById(\"detaljiArtikla\").value.trim();\n    const kolicina = parseInt(document.getElementById(\"kolicinaArtikla\").value);\n\n    if (!naziv) { alert(\"Molimo izaberite stavku!\"); return; }\n    if (naziv === \"Drugo...\" && !detalji) { alert(\"Molimo unesite opis za opciju 'Drugo...'!\"); return; }\n    if (isNaN(kolicina) || kolicina < 1) { alert(\"Unesite ispravnu koli\u010dinu!\"); return; }\n\n    let konacanNaziv = naziv;\n    if (naziv === \"Drugo...\") {\n      konacanNaziv = detalji;\n    } else if (detalji) {\n      konacanNaziv += ` \u2014 ${detalji}`;\n    }\n\n    trebovaneStavke.push({ naziv: konacanNaziv, kolicina: kolicina });\n    osveziTabelu();\n\n    artikalSelect.value = \"\";\n    document.getElementById(\"detaljiArtikla\").value = \"\";\n    document.getElementById(\"kolicinaArtikla\").value = \"1\";\n    promeniArtikal();\n  }\n\n  function osveziTabelu() {\n    const telo = document.getElementById(\"tabelaTelo\");\n    telo.innerHTML = \"\";\n\n    if (trebovaneStavke.length === 0) {\n      telo.innerHTML = `<tr id=\"prazanRed\"><td colspan=\"3\" style=\"text-align: center; color: #94a3b8;\">Niste dodali nijednu stavku na spisak.<\/td><\/tr>`;\n    } else {\n      trebovaneStavke.forEach((st, index) => {\n        const tr = document.createElement(\"tr\");\n        tr.innerHTML = `\n          <td>${st.naziv}<\/td>\n          <td><input type=\"number\" min=\"1\" value=\"${st.kolicina}\" onchange=\"izmeniKolicinu(${index}, this.value)\"><\/td>\n          <td style=\"text-align: center;\"><button type=\"button\" class=\"btn-remove\" onclick=\"obrisiStavku(${index})\">\u2715<\/button><\/td>\n        `;\n        telo.appendChild(tr);\n      });\n    }\n    document.getElementById(\"trebovaneStavkeInput\").value = JSON.stringify(trebovaneStavke);\n  }\n\n  function izmeniKolicinu(index, novaKolicina) {\n    const kol = parseInt(novaKolicina);\n    if (!isNaN(kol) && kol > 0) {\n      trebovaneStavke[index].kolicina = kol;\n      document.getElementById(\"trebovaneStavkeInput\").value = JSON.stringify(trebovaneStavke);\n    }\n  }\n\n  function obrisiStavku(index) {\n    trebovaneStavke.splice(index, 1);\n    osveziTabelu();\n  }\n\n  function setRequired(fieldIds, isRequired) {\n    fieldIds.forEach(id => {\n      const el = document.getElementById(id);\n      if (el) el.required = isRequired;\n    });\n  }\n\n  function posaljiZahtev(event) {\n    event.preventDefault();\n\n    const tip = document.getElementById(\"tipZahteva\").value;\n\n    if (tip === \"Trebovanje\" && trebovaneStavke.length === 0) {\n      alert(\"Molimo dodajte bar jednu stavku u spisak trebovanja!\");\n      return;\n    }\n\n    if (tip === \"Rezervacija\" || tip === \"Rezervacija opreme\") {\n      const vremeOd = document.getElementById(\"vremeOd\").value;\n      const vremeDo = document.getElementById(\"vremeDo\").value;\n\n      if (vremeOd >= vremeDo) {\n        alert(\"Vreme 'OD' mora biti pre vremena 'DO'!\");\n        return;\n      }\n    }\n\n    const btn = document.getElementById(\"submitBtn\");\n    btn.disabled = true;\n    btn.textContent = \"Slanje u toku...\";\n\n    const formData = new FormData(document.getElementById(\"nsbiForm\"));\n\n    fetch(\"send.php\", {\n      method: \"POST\",\n      body: formData\n    })\n    .then(response => response.text())\n    .then(data => {\n      alert(\"Zahtev je uspe\u0161no poslat!\");\n      document.getElementById(\"nsbiForm\").reset();\n      trebovaneStavke = [];\n      osveziTabelu();\n      promeniTipZahteva();\n      btn.disabled = false;\n      btn.textContent = \"Po\u0161alji zahtev\";\n    })\n    .catch(error => {\n      alert(\"Do\u0161lo je do gre\u0161ke prilikom slanja.\");\n      btn.disabled = false;\n      btn.textContent = \"Po\u0161alji zahtev\";\n    });\n  }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>NSBI &#8211; Interni Portal NSBI Interni Portal Sistem za rezervaciju, prijavu kvarova i trebovanje \ud83d\udcdd Forma za zahtev \ud83d\udcd6 Uputstvo za rezervaciju \ud83d\udcc5 Pravila i Kalendar \u26a0\ufe0f Pravila kori\u0161\u0107enja Ime&#8230;<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-9465","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Marko Mazalica","author_link":"https:\/\/nsbi.org.rs\/sr\/author\/m-mazalica"},"uagb_comment_info":0,"uagb_excerpt":"NSBI &#8211; Interni Portal NSBI Interni Portal Sistem za rezervaciju, prijavu kvarova i trebovanje \ud83d\udcdd Forma za zahtev \ud83d\udcd6 Uputstvo za rezervaciju \ud83d\udcc5 Pravila i Kalendar \u26a0\ufe0f Pravila kori\u0161\u0107enja Ime...","_links":{"self":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/9465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/comments?post=9465"}],"version-history":[{"count":24,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/9465\/revisions"}],"predecessor-version":[{"id":9502,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/9465\/revisions\/9502"}],"wp:attachment":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/media?parent=9465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}