| Server IP : 193.86.120.172 / Your IP : 216.73.216.215 Web Server : Apache/2.4.63 (Unix) System : Linux JServices 3.10.108 #86003 SMP Wed Oct 22 13:20:46 CST 2025 x86_64 User : kubec ( 1026) PHP Version : 8.2.28 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /volume1/web/hotel_jservices_cz/ |
Upload File : |
<!DOCTYPE html>
<html lang="cs" id="htmlRoot">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Rezervace — Hotel DEMO</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--blue-700:#1d4ed8;--blue-600:#2563eb;--blue-500:#3b82f6;
--blue-100:#dbeafe;--blue-50:#eff6ff;
--gray-900:#0f172a;--gray-700:#334155;--gray-500:#64748b;
--gray-400:#94a3b8;--gray-300:#cbd5e1;--gray-200:#e2e8f0;
--gray-100:#f1f5f9;--gray-50:#f8fafc;--white:#ffffff;
--green:#16a34a;--red:#dc2626;--amber:#d97706;
--radius:10px;--shadow:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);
}
html,body{min-height:100%;background:var(--gray-50);color:var(--gray-900);font-family:Arial,sans-serif;font-size:15px;line-height:1.5}
/* NAV */
.nav{background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100}
.nav-logo{font-size:15px;font-weight:600;color:var(--blue-600)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-hodnoceni{font-size:13px;color:var(--gray-500);display:none;align-items:center;gap:5px}
.nav-hodnoceni .star{color:#f59e0b}
/* Přepínač jazyka */
.lang-sw{display:flex;gap:4px}
.lang-btn{background:none;border:1px solid var(--gray-200);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500;cursor:pointer;color:var(--gray-500);font-family:inherit;transition:all .15s}
.lang-btn:hover{border-color:var(--blue-400,#60a5fa);color:var(--blue-600)}
.lang-btn.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
/* HERO */
.hero{background:linear-gradient(135deg,var(--blue-700),var(--blue-500));color:#fff;text-align:center;padding:36px 24px 28px}
.hero h1{font-size:26px;font-weight:600;margin-bottom:6px;letter-spacing:-.3px}
.hero p{font-size:14px;opacity:.85}
/* KROKY */
.kroky-wrap{background:var(--white);border-bottom:1px solid var(--gray-200);overflow-x:auto}
.kroky{display:flex;max-width:760px;margin:0 auto}
.krok{flex:1;display:flex;align-items:center;gap:8px;padding:14px 12px;font-size:13px;color:var(--gray-400);border-bottom:2px solid transparent;white-space:nowrap;cursor:default;user-select:none}
.krok-num{width:22px;height:22px;border-radius:50%;background:var(--gray-200);color:var(--gray-500);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.krok.aktivni{color:var(--blue-600);border-bottom-color:var(--blue-600)}
.krok.aktivni .krok-num{background:var(--blue-600);color:#fff}
.krok.hotovo .krok-num{background:var(--green);color:#fff}
/* LAYOUT */
.page{max-width:960px;margin:0 auto;padding:28px 16px 24px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
/* CARD */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
.card:last-child{margin-bottom:0}
.card-title{font-size:11px;font-weight:600;letter-spacing:1px;color:var(--gray-400);text-transform:uppercase;margin-bottom:16px}
/* FORMULÁŘ */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12px;font-weight:500;color:var(--gray-700);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--gray-200);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--gray-900);background:var(--white);transition:border-color .15s;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50)}
.field textarea{resize:vertical;min-height:72px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.field-error{font-size:12px;color:var(--red);margin-top:4px;display:none}
.field.error input,.field.error select{border-color:var(--red)}
.field.error .field-error{display:block}
.field-hint{font-size:11px;color:var(--gray-400);margin-top:4px}
/* FIRMA TOGGLE */
.firma-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px;background:var(--gray-50);border-radius:8px;cursor:pointer}
.firma-cb{width:18px;height:18px;accent-color:var(--blue-600);cursor:pointer;flex-shrink:0}
.firma-toggle-label{font-size:13px;color:var(--gray-700);cursor:pointer;user-select:none}
.firma-fields{display:none}
.firma-fields.visible{display:block}
.ico-wrap{display:flex;gap:8px;align-items:flex-end}
.ico-wrap .field{flex:1;margin-bottom:0}
.btn-ares{background:var(--blue-50);color:var(--blue-600);border:1px solid var(--blue-100);border-radius:8px;padding:9px 12px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s;flex-shrink:0}
.btn-ares:hover{background:var(--blue-100)}
.btn-ares:disabled{opacity:.5;cursor:not-allowed}
.ares-status{font-size:12px;margin-top:6px;padding:6px 10px;border-radius:6px;display:none}
.ares-status.ok{display:block;background:#dcfce7;color:#166534}
.ares-status.err{display:block;background:#fee2e2;color:#991b1b}
.ares-status.loading{display:block;background:var(--gray-50);color:var(--gray-500)}
/* DATE STRIP */
.date-strip{display:grid;grid-template-columns:1fr auto 1fr;border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;margin-bottom:14px}
.date-box{padding:12px 14px;cursor:pointer;transition:background .15s}
.date-box:hover{background:var(--gray-50)}
.date-box label{display:block;font-size:10px;font-weight:600;letter-spacing:1px;color:var(--gray-400);margin-bottom:4px;cursor:pointer}
.date-box span{font-size:14px;font-weight:500;color:var(--gray-900)}
.date-box span.placeholder{color:var(--gray-400);font-weight:400}
.date-sep{width:1px;background:var(--gray-200)}
.noci-box{padding:12px 16px;border-left:1px solid var(--gray-200);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--blue-50)}
.noci-box .n{font-size:20px;font-weight:600;color:var(--blue-600);line-height:1}
.noci-box .l{font-size:10px;font-weight:600;letter-spacing:1px;color:var(--blue-500);margin-top:2px}
/* KALENDÁŘ */
.kalendar-wrap{display:none;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-md)}
.kalendar-wrap.otevreny{display:block}
.kal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kal-mesic{font-size:14px;font-weight:600;color:var(--gray-900)}
.kal-nav{background:none;border:1px solid var(--gray-200);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;color:var(--gray-500);display:flex;align-items:center;justify-content:center}
.kal-nav:hover{background:var(--gray-100)}
.kal-dny-nazvy{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.kal-dny-nazvy span{font-size:11px;color:var(--gray-400);padding:4px 0}
.kal-dny{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal-den{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:13px;cursor:pointer;color:var(--gray-700);transition:background .1s;position:relative}
.kal-den:hover:not(.disabled):not(.prazdny){background:var(--blue-50);color:var(--blue-600)}
/* Minulost — výrazně zašedlá */
.kal-den.minulost{color:var(--gray-300);cursor:not-allowed;background:transparent}
.kal-den.disabled{color:var(--gray-300);cursor:not-allowed}
.kal-den.prazdny{cursor:default}
/* Dnešní datum — výrazný modrý kroužek */
.kal-den.dnes{background:var(--blue-600);color:#fff;font-weight:700;border-radius:50%}
.kal-den.dnes:hover{background:var(--blue-700)}
.kal-den.vybrano-od{background:var(--blue-600);color:#fff;border-radius:6px 0 0 6px}
.kal-den.vybrano-do{background:var(--blue-600);color:#fff;border-radius:0 6px 6px 0}
.kal-den.v-rozsahu{background:var(--blue-100);border-radius:0}
/* Pokud je dnešek zároveň vybraný */
.kal-den.dnes.vybrano-od,.kal-den.dnes.vybrano-do{background:var(--blue-700);border-radius:6px}
/* POKOJE (typy) */
.pokoje-list{display:flex;flex-direction:column;gap:10px}
.pokoj-karta{border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:14px 16px;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;transition:border-color .15s,background .15s}
.pokoj-karta:hover:not(.nedostupny){border-color:#93c5fd;background:var(--blue-50)}
.pokoj-karta.vybrano{border-color:var(--blue-600);background:var(--blue-50)}
.pokoj-karta.nedostupny{opacity:.5;cursor:not-allowed}
.pokoj-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--gray-300);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.pokoj-karta.vybrano .pokoj-radio{border-color:var(--blue-600)}
.pokoj-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue-600);display:none}
.pokoj-karta.vybrano .pokoj-radio::after{display:block}
.pokoj-nazev{font-size:14px;font-weight:500;color:var(--gray-900);margin-bottom:2px}
.pokoj-meta{font-size:12px;color:var(--gray-500)}
.pokoj-badge{font-size:11px;padding:2px 8px;border-radius:4px;margin-top:4px;display:inline-block}
.pokoj-badge.dostupny{background:#dcfce7;color:var(--green)}
.pokoj-badge.nedostupny{background:var(--gray-100);color:var(--gray-400)}
.pokoj-badge.min-pobyt{background:#fef9c3;color:var(--amber)}
.pokoj-cena{text-align:right}
.pokoj-cena strong{display:block;font-size:15px;color:var(--gray-900)}
.pokoj-cena small{font-size:11px;color:var(--gray-400)}
.pokoj-sleva{font-size:11px;color:var(--green);margin-top:3px}
.pokoj-cena-puvodni{font-size:12px;color:var(--gray-400);text-decoration:line-through}
/* Upozornění pro mnoho hostů */
.alert-info-hoste{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--blue-700);margin-bottom:14px}
/* DOPLŇKY */
.doplnek-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100)}
.doplnek-row:last-child{border-bottom:none}
.doplnek-info{flex:1}
.doplnek-nazev{font-size:14px;color:var(--gray-900);margin-bottom:1px}
.doplnek-cena{font-size:12px;color:var(--gray-500)}
.doplnek-row.nedostupny .doplnek-nazev{color:var(--gray-400)}
.doplnek-row.nedostupny .doplnek-cena{color:var(--gray-300)}
.doplnek-nedostupny-text{font-size:11px;color:var(--gray-400);font-style:italic;margin-top:2px}
.toggle{width:40px;height:22px;border-radius:11px;background:var(--gray-200);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;border:none}
.toggle.on{background:var(--blue-600)}
.toggle::after{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on::after{left:20px}
.toggle:disabled{opacity:.4;cursor:not-allowed}
/* SHRNUTÍ */
.shrnuti-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:76px}
.shrnuti-header{background:var(--gray-900);color:#fff;padding:16px 20px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.shrnuti-body{padding:16px 20px}
.shrnuti-radek{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--gray-500);padding:5px 0;border-bottom:1px solid var(--gray-100)}
.shrnuti-radek:last-of-type{border-bottom:none}
.shrnuti-radek .val{color:var(--gray-900);font-weight:500}
.shrnuti-radek .sleva-val{color:var(--green);font-weight:500}
.shrnuti-celkem{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px;border-top:1px solid var(--gray-200);background:var(--gray-50)}
.shrnuti-celkem .lab{font-size:13px;font-weight:600;color:var(--gray-900)}
.shrnuti-celkem .castka{font-size:20px;font-weight:700;color:var(--blue-600)}
.shrnuti-prazdny{color:var(--gray-400);font-size:13px;text-align:center;padding:20px 0}
/* TLAČÍTKA */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:opacity .15s,transform .1s;font-family:inherit;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue-600);color:#fff;width:100%}
.btn-primary:hover{background:var(--blue-700)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-secondary{background:var(--white);color:var(--gray-700);border:1px solid var(--gray-200)}
.btn-secondary:hover{background:var(--gray-50)}
.btn-row{display:flex;gap:10px;margin-top:20px}
.btn-row .btn-secondary{flex:0 0 auto}
.btn-row .btn-primary{flex:1}
/* ALERT */
.alert{padding:12px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert-info{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100)}
.alert-ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.spinner{width:18px;height:18px;border:2px solid var(--gray-200);border-top-color:var(--blue-600);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
/* POTVRZENÍ */
.potvrzeni-wrap{text-align:center;padding:32px 24px}
.potvrzeni-ikona{font-size:48px;margin-bottom:16px}
.potvrzeni-wrap h2{font-size:22px;font-weight:600;margin-bottom:8px}
.potvrzeni-wrap p{font-size:14px;color:var(--gray-500);margin-bottom:20px}
.potvrzeni-detail{background:var(--gray-50);border-radius:8px;padding:16px;text-align:left;margin-bottom:20px}
.potvrzeni-detail-radek{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--gray-700)}
.potvrzeni-detail-radek strong{color:var(--gray-900)}
/* PATIČKA */
.footer{
position:fixed;bottom:0;left:0;right:0;
background:var(--white);
border-top:1px solid var(--gray-200);
padding:11px 20px;
text-align:center;
font-size:12px;
color:var(--gray-400);
z-index:50;
}
.footer a{color:var(--gray-500);text-decoration:none;font-weight:500;border-bottom:1px solid var(--gray-300)}
.footer a:hover{color:var(--blue-600);border-bottom-color:var(--blue-300,#93c5fd)}
/* Přidat padding dole aby obsah nebyl schovaný za patičkou */
.page{padding-bottom:52px}
/* RESPONZIVITA */
@media(max-width:700px){
.layout{grid-template-columns:1fr}
.shrnuti-card{position:static}
.field-row,.field-row-3{grid-template-columns:1fr}
.hero h1{font-size:20px}
.hero{padding:24px 16px 20px}
.krok span{display:none}
.noci-box{padding:10px 12px}
.date-box{padding:10px 12px}
.lang-btn{padding:3px 6px;font-size:11px}
}
@media(max-width:400px){
.pokoj-karta{grid-template-columns:auto 1fr}
.pokoj-cena{display:none}
}
</style>
</head>
<body>
<nav class="nav">
<div class="nav-logo" id="hotelNazev">Hotel DEMO</div>
<div class="nav-right">
<div class="nav-hodnoceni" id="navHodnoceni">
<span class="star">★</span>
<span id="navHodnoceniText"></span>
</div>
<div class="lang-sw">
<button class="lang-btn active" onclick="setLang('cs')">CS</button>
<button class="lang-btn" onclick="setLang('en')">EN</button>
<button class="lang-btn" onclick="setLang('de')">DE</button>
</div>
</div>
</nav>
<div class="hero">
<h1 id="heroH1">Rezervujte si pobyt</h1>
<p id="heroP">Vyberte termín, pokoj a doplňky — celý proces trvá 2 minuty.</p>
</div>
<div class="kroky-wrap">
<div class="kroky">
<div class="krok aktivni" id="krokEl1"><div class="krok-num">1</div><span id="krokLbl1">Termín</span></div>
<div class="krok" id="krokEl2"><div class="krok-num">2</div><span id="krokLbl2">Pokoj</span></div>
<div class="krok" id="krokEl3"><div class="krok-num">3</div><span id="krokLbl3">Doplňky</span></div>
<div class="krok" id="krokEl4"><div class="krok-num">4</div><span id="krokLbl4">Kontakt</span></div>
</div>
</div>
<div class="page">
<div class="layout">
<div id="mainContent">
<!-- KROK 1 — TERMÍN -->
<div id="krok1">
<div class="card">
<div class="card-title" id="lbl_termin_pobytu">Termín pobytu</div>
<div class="date-strip">
<div class="date-box" id="boxOd" >
<label id="lbl_prijezd">PŘÍJEZD</label>
<span id="lblOd" class="placeholder">Vyberte datum</span>
</div>
<div class="date-sep"></div>
<div class="date-box" id="boxDo" >
<label id="lbl_odjezd">ODJEZD</label>
<span id="lblDo" class="placeholder">Vyberte datum</span>
</div>
<div class="noci-box" id="nociBox" style="display:none">
<span class="n" id="nociPocet">—</span>
<span class="l" id="lbl_noci">NOCÍ</span>
</div>
</div>
<div class="kalendar-wrap" id="kalendarWrap">
<div class="kal-header">
<button class="kal-nav" onclick="kalPrevMesic()">‹</button>
<span class="kal-mesic" id="kalMesicNazev"></span>
<button class="kal-nav" onclick="kalNextMesic()">›</button>
<button class="kal-nav" onclick="kalZavrit()" title="Zavřít" style="margin-left:8px;font-size:16px">×</button>
</div>
<div class="kal-dny-nazvy" id="kalDnyNazvy">
<span>Po</span><span>Út</span><span>St</span><span>Čt</span><span>Pá</span><span>So</span><span>Ne</span>
</div>
<div class="kal-dny" id="kalDny"></div>
</div>
<div id="alertTermin"></div>
<div class="field">
<label for="pocetHostu" id="lbl_pocet_hostu">Počet hostů</label>
<select id="pocetHostu" onchange="aktualizujHostu()">
<option value="1">1</option><option value="2" selected>2</option>
<option value="3">3</option><option value="4">4</option>
<option value="5">5</option><option value="6">6</option>
</select>
</div>
<div id="alertHostu"></div>
</div>
<div class="btn-row">
<button class="btn btn-primary" onclick="naKrok2()" id="btnKrok1" data-i18n="btn_dalsi_pokoj">Vybrat pokoj →</button>
</div>
</div>
<!-- KROK 2 — POKOJ -->
<div id="krok2" style="display:none">
<div class="card">
<div class="card-title" id="lbl_dostupne_pokoje">Dostupné typy pokojů</div>
<div id="pokojeSeznam"><div class="alert alert-info"><div class="spinner"></div> <span data-i18n="nacitam_pokoje">Načítám dostupné pokoje…</span></div></div>
</div>
<div class="btn-row">
<button class="btn btn-secondary" onclick="naKrok(1)" data-i18n="btn_zpet">← Zpět</button>
<button class="btn btn-primary" onclick="naKrok3()" id="btnKrok2" disabled data-i18n="btn_dalsi_doplnky">Vybrat doplňky →</button>
</div>
</div>
<!-- KROK 3 — DOPLŇKY -->
<div id="krok3" style="display:none">
<div class="card">
<div class="card-title" id="lbl_doplnky">Doplňkové služby</div>
<div id="doplnkySeznam"><div class="alert alert-info"><div class="spinner"></div> <span data-i18n="nacitam_doplnky">Načítám doplňky…</span></div></div>
</div>
<div class="btn-row">
<button class="btn btn-secondary" onclick="naKrok(2)" data-i18n="btn_zpet">← Zpět</button>
<button class="btn btn-primary" onclick="naKrok4()" data-i18n="btn_dalsi_kontakt">Vyplnit kontakt →</button>
</div>
</div>
<!-- KROK 4 — KONTAKT -->
<div id="krok4" style="display:none">
<div class="card">
<div class="card-title" id="lbl_kontaktni_udaje">Kontaktní údaje</div>
<div id="alertKontakt"></div>
<div class="field-row">
<div class="field" id="fJmeno">
<label for="jmeno" data-i18n="lbl_jmeno">Jméno *</label>
<input type="text" id="jmeno" autocomplete="given-name">
<div class="field-error" data-i18n="err_jmeno">Vyplňte jméno.</div>
</div>
<div class="field" id="fPrijmeni">
<label for="prijmeni" data-i18n="lbl_prijmeni">Příjmení *</label>
<input type="text" id="prijmeni" autocomplete="family-name">
<div class="field-error" data-i18n="err_prijmeni">Vyplňte příjmení.</div>
</div>
</div>
<div class="field" id="fEmail">
<label for="email" data-i18n="lbl_email">E-mail *</label>
<input type="email" id="email" autocomplete="email">
<div class="field-error" data-i18n="err_email">Zadejte platný e-mail.</div>
</div>
<div class="field" id="fTelefon">
<label for="telefon" data-i18n="lbl_telefon">Telefon *</label>
<input type="tel" id="telefon" autocomplete="tel">
<div class="field-error" data-i18n="err_telefon">Zadejte telefonní číslo.</div>
</div>
<!-- Adresa — vždy viditelná -->
<div class="field">
<label for="faktura_ulice" data-i18n="lbl_ulice">Ulice a číslo popisné</label>
<input type="text" id="faktura_ulice" autocomplete="street-address">
</div>
<div class="field-row">
<div class="field">
<label for="faktura_psc" data-i18n="lbl_psc">PSČ</label>
<input type="text" id="faktura_psc" autocomplete="postal-code" maxlength="6" placeholder="123 45"
oninput="formatPsc(this)">
</div>
<div class="field">
<label for="faktura_mesto" data-i18n="lbl_mesto">Město</label>
<input type="text" id="faktura_mesto" autocomplete="address-level2">
</div>
</div>
<!-- Objednávka na firmu -->
<div class="firma-toggle-row" onclick="toggleFirma()">
<input type="checkbox" class="firma-cb" id="naFirmaCb" onchange="toggleFirma()" onclick="event.stopPropagation()">
<label class="firma-toggle-label" for="naFirmaCb" data-i18n="lbl_na_firmu">Objednávám na firmu (faktura)</label>
</div>
<div class="firma-fields" id="firmaFields">
<div class="field" id="fFirma">
<label for="firma" data-i18n="lbl_firma">Název firmy *</label>
<input type="text" id="firma" autocomplete="organization">
<div class="field-error" data-i18n="err_firma">Zadejte název firmy.</div>
</div>
<div class="ico-wrap" style="margin-bottom:12px">
<div class="field">
<label for="ico" data-i18n="lbl_ico">IČ</label>
<input type="text" id="ico" maxlength="20" placeholder="12345678"
oninput="aresReset()"
onblur="aresAutoVyhledat()">
</div>
<button class="btn-ares" id="btnAres" onclick="aresVyhledat()" type="button" title="Načíst z ARES">
🔍
</button>
</div>
<div class="ares-status" id="aresStatus"></div>
<div class="field">
<label for="dic" data-i18n="lbl_dic">DIČ</label>
<input type="text" id="dic" maxlength="20">
</div>
</div>
<div class="field" style="margin-top:14px">
<label for="poznamka" data-i18n="lbl_poznamka">Zvláštní přání / poznámka</label>
<textarea id="poznamka"></textarea>
</div>
</div>
<div class="btn-row">
<button class="btn btn-secondary" onclick="naKrok(3)" data-i18n="btn_zpet">← Zpět</button>
<button class="btn btn-primary" onclick="odeslat()" id="btnOdeslat" data-i18n="btn_odeslat">Odeslat rezervaci</button>
</div>
</div>
<!-- POTVRZENÍ -->
<div id="krokPotvrzeni" style="display:none">
<div class="card">
<div class="potvrzeni-wrap">
<div class="potvrzeni-ikona">✓</div>
<h2 data-i18n="potvrzeni_h2">Rezervace odeslána!</h2>
<p id="potvrzeniText"></p>
<div class="potvrzeni-detail" id="potvrzeniDetail"></div>
<button class="btn btn-secondary" style="display:inline-flex;width:auto" onclick="novaRezervace()" data-i18n="btn_nova_rezervace">Nová rezervace</button>
</div>
</div>
</div>
</div>
<!-- PRAVÝ SLOUPEC — SHRNUTÍ -->
<div>
<div class="shrnuti-card">
<div class="shrnuti-header" data-i18n="shrnuti_nadpis">Shrnutí rezervace</div>
<div class="shrnuti-body" id="shrnutiBody">
<div class="shrnuti-prazdny" data-i18n="shrnuti_prazdny">Vyberte termín a pokoj</div>
</div>
<div class="shrnuti-celkem" id="shrnutiCelkem" style="display:none">
<span class="lab" data-i18n="shrnuti_celkem">Celkem</span>
<span class="castka" id="shrnutiCastka">0 Kč</span>
</div>
</div>
</div>
</div>
</div>
<script>
// ============================================================
// PŘEKLADY
// ============================================================
const T = {
cs: {
lbl_prijezd:'PŘÍJEZD', lbl_odjezd:'ODJEZD', lbl_noci:'NOCÍ',
lbl_termin_pobytu:'Termín pobytu', lbl_pocet_hostu:'Počet hostů',
lbl_dostupne_pokoje:'Dostupné typy pokojů', lbl_doplnky:'Doplňkové služby',
lbl_kontaktni_udaje:'Kontaktní údaje',
lbl_jmeno:'Jméno *', lbl_prijmeni:'Příjmení *', lbl_email:'E-mail *',
lbl_telefon:'Telefon *', lbl_ulice:'Ulice a číslo popisné', lbl_psc:'PSČ',
lbl_mesto:'Město', lbl_na_firmu:'Objednávám na firmu (faktura)',
lbl_firma:'Název firmy *', lbl_ico:'IČ', lbl_dic:'DIČ',
lbl_poznamka:'Zvláštní přání / poznámka',
lbl_created_by:'Rezervační systém vytvořil ',
err_jmeno:'Vyplňte jméno.', err_prijmeni:'Vyplňte příjmení.',
err_email:'Zadejte platný e-mail.', err_telefon:'Zadejte telefonní číslo.',
err_firma:'Zadejte název firmy.',
btn_dalsi_pokoj:'Vybrat pokoj →', btn_dalsi_doplnky:'Vybrat doplňky →',
btn_dalsi_kontakt:'Vyplnit kontakt →', btn_zpet:'← Zpět',
btn_odeslat:'Odeslat rezervaci', btn_nova_rezervace:'Nová rezervace',
nacitam_pokoje:'Načítám dostupné pokoje…', nacitam_doplnky:'Načítám doplňky…',
shrnuti_nadpis:'Shrnutí rezervace', shrnuti_prazdny:'Vyberte termín a pokoj',
shrnuti_celkem:'Celkem',
krok1:'Termín', krok2:'Pokoj', krok3:'Doplňky', krok4:'Kontakt',
heroH1:'Rezervujte si pobyt', heroP:'Vyberte termín, pokoj a doplňky — celý proces trvá 2 minuty.',
vybrat_datum:'Vyberte datum', dostupny:'Dostupný', obsazeno:'Obsazeno',
min_pobyt:'Min. {n} nocí', volnych:'{n} volných', pokoj_sleva:'{n} % sleva (1 host)',
pokoj_noc:'/ noc', pocet_noci:'{n} nocí', pocet_hostu:'{n} host(é)',
cena_pobyt:'Pokoj ({n} nocí)', kapacita:'osob', min_pobyt_info:'Min. pobyt',
hostu_vice:'Pro {n} hostů není v nabídce jeden pokoj. Kontaktujte nás pro rezervaci více pokojů.',
kontakt_tel:nastaveni => nastaveni,
doplnek_vycerpano:'Kapacita vyčerpána pro tento termín', bez_stravovani:'Bez stravování',
doplnek_dobijeni_info:'Dobíjení zahrnuje parkovací místo',
doplnek_parkovani_blok:'Parkování je zahrnuto v dobíjení',
doplnek_snidane_nedostupne:'Tento typ pokoje snídaně nenabízí',
potvrzeni_h2:'Rezervace odeslána!', potvrzeni_email:'Potvrzení jsme zaslali na {email}.',
potvrzeni_host:'Host', potvrzeni_prijezd:'Příjezd', potvrzeni_odjezd:'Odjezd',
potvrzeni_pokoj:'Pokoj', err_obecna:'Chyba při odesílání rezervace.',
err_pripojeni:'Nepodařilo se připojit k serveru.',
dn:['Po','Út','St','Čt','Pá','So','Ne'],
mesice:['Leden','Únor','Březen','Duben','Květen','Červen','Červenec','Srpen','Září','Říjen','Listopad','Prosinec'],
mesice_gen:['ledna','února','března','dubna','května','června','července','srpna','září','října','listopadu','prosince'],
},
en: {
lbl_prijezd:'CHECK-IN', lbl_odjezd:'CHECK-OUT', lbl_noci:'NIGHTS',
lbl_termin_pobytu:'Stay dates', lbl_pocet_hostu:'Number of guests',
lbl_dostupne_pokoje:'Available room types', lbl_doplnky:'Additional services',
lbl_kontaktni_udaje:'Contact details',
lbl_jmeno:'First name *', lbl_prijmeni:'Last name *', lbl_email:'E-mail *',
lbl_telefon:'Phone *', lbl_ulice:'Street and number', lbl_psc:'Postal code',
lbl_mesto:'City', lbl_na_firmu:'Company booking (invoice)',
lbl_firma:'Company name *', lbl_ico:'Company ID', lbl_dic:'VAT ID',
lbl_poznamka:'Special requests / notes',
lbl_created_by:'Booking system by ',
err_jmeno:'Please enter first name.', err_prijmeni:'Please enter last name.',
err_email:'Please enter a valid e-mail.', err_telefon:'Please enter a phone number.',
err_firma:'Please enter company name.',
btn_dalsi_pokoj:'Select room →', btn_dalsi_doplnky:'Select extras →',
btn_dalsi_kontakt:'Fill in contact →', btn_zpet:'← Back',
btn_odeslat:'Submit reservation', btn_nova_rezervace:'New reservation',
nacitam_pokoje:'Loading available rooms…', nacitam_doplnky:'Loading extras…',
shrnuti_nadpis:'Booking summary', shrnuti_prazdny:'Select dates and a room',
shrnuti_celkem:'Total',
krok1:'Dates', krok2:'Room', krok3:'Extras', krok4:'Contact',
heroH1:'Book your stay', heroP:'Select dates, room and extras — takes 2 minutes.',
vybrat_datum:'Select date', dostupny:'Available', obsazeno:'Unavailable',
min_pobyt:'Min. {n} nights', volnych:'{n} available', pokoj_sleva:'{n}% discount (1 guest)',
pokoj_noc:'/ night', pocet_noci:'{n} nights', pocet_hostu:'{n} guest(s)',
cena_pobyt:'Room ({n} nights)', kapacita:'persons', min_pobyt_info:'Min. stay',
hostu_vice:'For {n} guests we recommend booking multiple rooms. Please contact us.',
doplnek_vycerpano:'Capacity full for this period', bez_stravovani:'No meals',
doplnek_dobijeni_info:'EV charging includes a parking spot',
doplnek_parkovani_blok:'Parking is included with EV charging',
doplnek_snidane_nedostupne:'Breakfast not available for this room type',
potvrzeni_h2:'Reservation submitted!', potvrzeni_email:'Confirmation sent to {email}.',
potvrzeni_host:'Guest', potvrzeni_prijezd:'Check-in', potvrzeni_odjezd:'Check-out',
potvrzeni_pokoj:'Room', err_obecna:'Error submitting reservation.',
err_pripojeni:'Could not connect to server.',
dn:['Mo','Tu','We','Th','Fr','Sa','Su'],
mesice:['January','February','March','April','May','June','July','August','September','October','November','December'],
mesice_gen:['January','February','March','April','May','June','July','August','September','October','November','December'],
},
de: {
lbl_prijezd:'ANREISE', lbl_odjezd:'ABREISE', lbl_noci:'NÄCHTE',
lbl_termin_pobytu:'Aufenthaltsdaten', lbl_pocet_hostu:'Anzahl der Gäste',
lbl_dostupne_pokoje:'Verfügbare Zimmertypen', lbl_doplnky:'Zusatzleistungen',
lbl_kontaktni_udaje:'Kontaktdaten',
lbl_jmeno:'Vorname *', lbl_prijmeni:'Nachname *', lbl_email:'E-Mail *',
lbl_telefon:'Telefon *', lbl_ulice:'Straße und Hausnummer', lbl_psc:'Postleitzahl',
lbl_mesto:'Stadt', lbl_na_firmu:'Firmenbestellung (Rechnung)',
lbl_firma:'Firmenname *', lbl_ico:'Steuernummer', lbl_dic:'USt-IdNr.',
lbl_poznamka:'Besondere Wünsche / Anmerkungen',
lbl_created_by:'Buchungssystem von ',
err_jmeno:'Bitte Vorname eingeben.', err_prijmeni:'Bitte Nachname eingeben.',
err_email:'Bitte gültige E-Mail eingeben.', err_telefon:'Bitte Telefonnummer eingeben.',
err_firma:'Bitte Firmennamen eingeben.',
btn_dalsi_pokoj:'Zimmer wählen →', btn_dalsi_doplnky:'Extras wählen →',
btn_dalsi_kontakt:'Kontakt ausfüllen →', btn_zpet:'← Zurück',
btn_odeslat:'Buchung senden', btn_nova_rezervace:'Neue Buchung',
nacitam_pokoje:'Lade verfügbare Zimmer…', nacitam_doplnky:'Lade Extras…',
shrnuti_nadpis:'Buchungsübersicht', shrnuti_prazdny:'Datum und Zimmer wählen',
shrnuti_celkem:'Gesamt',
krok1:'Datum', krok2:'Zimmer', krok3:'Extras', krok4:'Kontakt',
heroH1:'Buchen Sie Ihren Aufenthalt', heroP:'Datum, Zimmer und Extras wählen — dauert 2 Minuten.',
vybrat_datum:'Datum wählen', dostupny:'Verfügbar', obsazeno:'Nicht verfügbar',
min_pobyt:'Mind. {n} Nächte', volnych:'{n} verfügbar', pokoj_sleva:'{n}% Rabatt (1 Gast)',
pokoj_noc:'/ Nacht', pocet_noci:'{n} Nächte', pocet_hostu:'{n} Gast/Gäste',
cena_pobyt:'Zimmer ({n} Nächte)', kapacita:'Personen', min_pobyt_info:'Mindestaufenthalt',
hostu_vice:'Für {n} Gäste empfehlen wir mehrere Zimmer. Bitte kontaktieren Sie uns.',
doplnek_vycerpano:'Kapazität für diesen Zeitraum ausgeschöpft', bez_stravovani:'Ohne Verpflegung',
doplnek_dobijeni_info:'E-Ladestation beinhaltet Parkplatz',
doplnek_parkovani_blok:'Parken ist im E-Laden enthalten',
doplnek_snidane_nedostupne:'Frühstück für diesen Zimmertyp nicht verfügbar',
potvrzeni_h2:'Buchung gesendet!', potvrzeni_email:'Bestätigung gesendet an {email}.',
potvrzeni_host:'Gast', potvrzeni_prijezd:'Anreise', potvrzeni_odjezd:'Abreise',
potvrzeni_pokoj:'Zimmer', err_obecna:'Fehler beim Senden der Buchung.',
err_pripojeni:'Verbindung zum Server fehlgeschlagen.',
dn:['Mo','Di','Mi','Do','Fr','Sa','So'],
mesice:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
mesice_gen:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
},
};
let LANG = 'cs';
function t(key, params) {
let s = (T[LANG] || T.cs)[key] || (T.cs[key] || key);
if (params) Object.entries(params).forEach(([k,v]) => { s = s.replaceAll('{'+k+'}', v); });
return s;
}
function setLang(lang) {
LANG = lang;
document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.textContent === lang.toUpperCase()));
aplikujPreklady();
// Vlastní úvodní text z DB má přednost před statickým překladem — nastavit AŽ PO aplikujPreklady
if (window._uvodniTexty) {
const heroText = window._uvodniTexty[lang] || window._uvodniTexty.cs;
if (heroText && $('heroP')) $('heroP').textContent = heroText;
}
aktualizujTermin();
if (S.krok === 2 && S.datumOd && S.datumDo) renderPokoje(window._pokojeCache);
if (S.krok === 3 && window._doplnkyCache) renderDoplnky(window._doplnkyCache);
aktualizujShrnuti();
kalRender();
}
function aplikujPreklady() {
const el = id => document.getElementById(id);
el('heroH1').textContent = t('heroH1');
el('heroP').textContent = t('heroP');
el('lbl_prijezd').textContent = t('lbl_prijezd');
el('lbl_odjezd').textContent = t('lbl_odjezd');
el('lbl_noci').textContent = t('lbl_noci');
el('lbl_termin_pobytu').textContent = t('lbl_termin_pobytu');
el('lbl_pocet_hostu').textContent = t('lbl_pocet_hostu');
el('lbl_dostupne_pokoje').textContent = t('lbl_dostupne_pokoje');
el('lbl_doplnky').textContent = t('lbl_doplnky');
el('lbl_kontaktni_udaje').textContent = t('lbl_kontaktni_udaje');
for (let i = 1; i <= 4; i++) el('krokLbl'+i).textContent = t('krok'+i);
document.querySelectorAll('[data-i18n]').forEach(el => {
const k = el.getAttribute('data-i18n');
if (T[LANG]?.[k] || T.cs[k]) el.textContent = t(k);
});
if (!S.datumOd) el('lblOd').textContent = t('vybrat_datum');
if (!S.datumDo) el('lblDo').textContent = t('vybrat_datum');
el('kalDnyNazvy').innerHTML = t('dn').map(d => `<span>${d}</span>`).join('');
}
// ============================================================
// STAV APLIKACE
// ============================================================
const S = {
krok: 1, datumOd: null, datumDo: null, pocetNoci: 0, pocetHostu: 2,
typId: null, typData: null, maxKapacita: 0,
doplnky: [], doplnkyZapnute: {},
dobijeniId: null, parkovaniId: null,
nastaveni: {},
};
const API = '/api/index.php';
const $ = id => document.getElementById(id);
const esc = s => String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
// ============================================================
// INIT
// ============================================================
async function init() {
try {
const r = await fetch(API + '/nastaveni/verejne');
const d = await r.json();
if (d.ok) {
S.nastaveni = d.data;
const nazev = d.data.hotel_nazev || 'Hotel DEMO';
$('hotelNazev').textContent = nazev;
document.title = 'Rezervace — ' + nazev;
// Uložit překlady úvodního textu
window._uvodniTexty = {
cs: d.data.uvodni_text || '',
en: d.data.uvodni_text_en || d.data.uvodni_text || '',
de: d.data.uvodni_text_de || d.data.uvodni_text || '',
};
const heroText = window._uvodniTexty[LANG] || window._uvodniTexty.cs;
if (heroText) $('heroP').textContent = heroText;
if (d.data.hodnoceni_verejne === '1' && d.data.hodnoceni_prumer) {
const el = $('navHodnoceni');
$('navHodnoceniText').textContent = d.data.hodnoceni_prumer + ' / 5 (' + d.data.hodnoceni_pocet + ' hodnocení)';
el.style.display = 'flex';
}
}
} catch(e) {}
kalInit();
aplikujPreklady();
// Vlastní úvodní text z DB má přednost před statickým překladem
if (window._uvodniTexty) {
const heroText = window._uvodniTexty[LANG] || window._uvodniTexty.cs;
if (heroText && $('heroP')) $('heroP').textContent = heroText;
}
}
// ============================================================
// NAVIGACE KROKY
// ============================================================
function naKrok(n) {
['krok1','krok2','krok3','krok4','krokPotvrzeni'].forEach(id => { $(id).style.display = 'none'; });
const el = $('krok' + n) || $('krokPotvrzeni');
if (el) el.style.display = '';
S.krok = n;
aktualizujKroky();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function aktualizujKroky() {
for (let i = 1; i <= 4; i++) {
const el = $('krokEl' + i);
if (!el) continue;
el.className = 'krok' + (i < S.krok ? ' hotovo' : i === S.krok ? ' aktivni' : '');
el.querySelector('.krok-num').textContent = i < S.krok ? '✓' : i;
}
}
async function naKrok2() {
if (!S.datumOd || !S.datumDo) { zobrazAlert('alertTermin', t('vybrat_datum'), 'error'); return; }
// Zkontrolovat hostů vs max kapacita
if (S.maxKapacita > 0 && S.pocetHostu > S.maxKapacita) {
// Zobrazit info ale přesto pokračovat (krok 2 zobrazí message)
}
naKrok(2);
await nactiPokoje();
}
async function naKrok3() {
if (!S.typId) return;
naKrok(3);
await nactiDoplnky();
}
function naKrok4() { naKrok(4); }
// ============================================================
// POČET HOSTŮ
// ============================================================
function aktualizujHostu() {
S.pocetHostu = parseInt($('pocetHostu').value);
aktualizujShrnuti();
}
// ============================================================
// KALENDÁŘ
// ============================================================
let kalRok, kalMesic, kalMod = 'od';
function kalInit() {
const dnes = new Date();
kalRok = dnes.getFullYear();
kalMesic = dnes.getMonth();
kalRender();
}
function otevritKalendar(mod) {
kalMod = mod;
$('kalendarWrap').classList.add('otevreny');
kalRender();
}
function kalZavrit() { $('kalendarWrap').classList.remove('otevreny'); }
function kalPrevMesic() { kalMesic--; if (kalMesic < 0) { kalMesic = 11; kalRok--; } kalRender(); }
function kalNextMesic() { kalMesic++; if (kalMesic > 11) { kalMesic = 0; kalRok++; } kalRender(); }
function kalRender() {
const mes = t('mesice');
$('kalMesicNazev').textContent = mes[kalMesic] + ' ' + kalRok;
$('kalDnyNazvy').innerHTML = t('dn').map(d => `<span>${d}</span>`).join('');
const prvni = new Date(kalRok, kalMesic, 1);
const posledni= new Date(kalRok, kalMesic + 1, 0);
const zacatek = (prvni.getDay() + 6) % 7;
const dnes = new Date(); dnes.setHours(0,0,0,0);
const minPredem = parseInt(S.nastaveni.rezervace_min_predem_dni || '1');
const minDatum = new Date(dnes);
minDatum.setDate(minDatum.getDate() + minPredem);
let html = '';
for (let i = 0; i < zacatek; i++) html += '<div class="kal-den prazdny"></div>';
for (let d = 1; d <= posledni.getDate(); d++) {
const datum = new Date(kalRok, kalMesic, d);
const datumStr= formatDatum(datum);
const jeDnes = datum.getTime() === dnes.getTime();
const jePast = datum < dnes;
const disabled= datum < minDatum;
const jeOd = datumStr === S.datumOd;
const jeDo = datumStr === S.datumDo;
const vRozsahu= S.datumOd && S.datumDo && datumStr > S.datumOd && datumStr < S.datumDo;
let cls = 'kal-den';
if (jePast && !jeDnes) cls += ' minulost';
else if (disabled && !jeDnes) cls += ' disabled';
if (jeDnes && !jeOd && !jeDo) cls += ' dnes';
if (jeOd) cls += ' vybrano-od';
if (jeDo) cls += ' vybrano-do';
if (vRozsahu) cls += ' v-rozsahu';
html += `<div class="${cls}" onclick="kalKlikDen('${datumStr}',${disabled && !jeDnes},event)">${d}</div>`;
}
$('kalDny').innerHTML = html;
}
function kalKlikDen(datumStr, disabled, ev) {
if (ev) ev.stopPropagation();
if (disabled) return;
if (kalMod === 'od' || !S.datumOd) {
S.datumOd = datumStr; S.datumDo = null; kalMod = 'do';
} else {
if (datumStr <= S.datumOd) { S.datumOd = datumStr; kalMod = 'do'; }
else { S.datumDo = datumStr; kalZavrit(); }
}
aktualizujTermin(); kalRender();
}
function aktualizujTermin() {
const lblOd = $('lblOd'), lblDo = $('lblDo');
if (S.datumOd) { lblOd.textContent = formatDatumCS(S.datumOd); lblOd.classList.remove('placeholder'); }
else { lblOd.textContent = t('vybrat_datum'); lblOd.classList.add('placeholder'); }
if (S.datumDo) {
lblDo.textContent = formatDatumCS(S.datumDo); lblDo.classList.remove('placeholder');
S.pocetNoci = pocetNoci(S.datumOd, S.datumDo);
$('nociBox').style.display = ''; $('nociPocet').textContent = S.pocetNoci;
schovejAlert('alertTermin');
} else {
lblDo.textContent = t('vybrat_datum'); lblDo.classList.add('placeholder');
$('nociBox').style.display = 'none';
}
aktualizujShrnuti();
}
// ============================================================
// POKOJE (typy)
// ============================================================
async function nactiPokoje() {
const container = $('pokojeSeznam');
container.innerHTML = `<div class="alert alert-info"><div class="spinner"></div> ${t('nacitam_pokoje')}</div>`;
try {
const url = `${API}/dostupnost/pokoje?datum_od=${S.datumOd}&datum_do=${S.datumDo}&pocet_hostu=${S.pocetHostu}`;
const r = await fetch(url);
const d = await r.json();
if (!d.ok) throw new Error(d.error);
window._pokojeCache = d.data;
S.maxKapacita = d.data.max_kapacita || 0;
renderPokoje(d.data);
} catch(e) {
container.innerHTML = `<div class="alert alert-error">${esc(e.message)}</div>`;
}
}
function renderPokoje(data) {
if (!data) return;
const container = $('pokojeSeznam');
const typy = data.typy || [];
// Upozornění pokud počet hostů přesahuje max kapacitu
let alertHtml = '';
if (S.pocetHostu > S.maxKapacita && S.maxKapacita > 0) {
const hotelTel = S.nastaveni.hotel_telefon || '';
alertHtml = `<div class="alert-info-hoste">
ℹ️ ${t('hostu_vice', {n: S.pocetHostu})}
${hotelTel ? ' <strong>' + esc(hotelTel) + '</strong>' : ''}
</div>`;
}
if (!typy.length) {
container.innerHTML = alertHtml + `<div class="alert alert-error">${t('obsazeno')}</div>`;
return;
}
let html = alertHtml + '<div class="pokoje-list">';
typy.forEach(typ => {
const vybrano = S.typId === typ.id ? 'vybrano' : '';
const nedost = !typ.dostupny ? 'nedostupny' : '';
const badgeTxt = !typ.kapacita_splnena ? t('obsazeno')
: typ.volnych_pokoju === 0 ? t('obsazeno')
: !typ.min_splnen ? t('min_pobyt', {n: typ.min_pobyt_noci})
: t('dostupny');
const badgeCls = typ.dostupny ? 'dostupny' : (typ.volnych_pokoju === 0 ? 'nedostupny' : 'min-pobyt');
const cenaNoc = parseFloat(typ.cena_za_noc);
const cenaHtml = typ.sleva_jednoluzko
? `<div class="pokoj-cena-puvodni">${formatCena(cenaNoc)} ${t('pokoj_noc')}</div>
<strong>${formatCena(typ.cena_po_sleve / S.pocetNoci)}</strong>
<small>${t('pokoj_noc')}</small>
<div class="pokoj-sleva">🏷 ${t('pokoj_sleva', {n: typ.sleva_jednoluzko_procent})}</div>`
: `<strong>${formatCena(cenaNoc)}</strong><small>${t('pokoj_noc')}</small>`;
html += `
<div class="pokoj-karta ${vybrano} ${nedost}" onclick="vyberTyp(${typ.id}, ${!typ.dostupny})">
<div class="pokoj-radio"></div>
<div class="pokoj-info">
<div class="pokoj-nazev">${esc((LANG !== 'cs' && typ['nazev_' + LANG]) || typ.nazev)}</div>
<div class="pokoj-meta">${typ.kapacita} ${t('kapacita')}${((LANG !== 'cs' && typ['popis_' + LANG]) || typ.popis) ? ' · ' + esc((LANG !== 'cs' && typ['popis_' + LANG]) || typ.popis) : ''}</div>
<span class="pokoj-badge ${badgeCls}">${badgeTxt}</span>
${typ.volnych_pokoju > 0 && typ.dostupny ? `<span style="font-size:11px;color:var(--gray-400);margin-left:6px">${t('volnych',{n:typ.volnych_pokoju})}</span>` : ''}
</div>
<div class="pokoj-cena">${cenaHtml}</div>
</div>`;
});
html += '</div>';
container.innerHTML = html;
}
function vyberTyp(id, nedostupny) {
if (nedostupny) return;
S.typId = id;
const data = (window._pokojeCache?.typy || []).find(t => t.id === id);
S.typData = data;
document.querySelectorAll('.pokoj-karta').forEach(el => el.classList.remove('vybrano'));
event.currentTarget.classList.add('vybrano');
$('btnKrok2').disabled = false;
aktualizujShrnuti();
}
// ============================================================
// DOPLŇKY
// ============================================================
async function nactiDoplnky() {
const container = $('doplnkySeznam');
container.innerHTML = `<div class="alert alert-info"><div class="spinner"></div> ${t('nacitam_doplnky')}</div>`;
try {
const url = `${API}/dostupnost/doplnky?datum_od=${S.datumOd}&datum_do=${S.datumDo}&typ_id=${S.typId}&pocet_hostu=${S.pocetHostu}`;
const r = await fetch(url);
const d = await r.json();
if (!d.ok) throw new Error(d.error);
window._doplnkyCache = d.data;
S.doplnky = d.data.doplnky;
S.dobijeniId = d.data.dobijeni_id;
S.parkovaniId= d.data.parkovani_id;
renderDoplnky(d.data);
} catch(e) {
container.innerHTML = `<div class="alert alert-error">${esc(e.message)}</div>`;
}
}
function renderDoplnky(data) {
if (!data) return;
const container = $('doplnkySeznam');
const doplnky = data.doplnky || [];
if (!doplnky.length) {
container.innerHTML = `<p style="color:var(--gray-400);font-size:13px">${t('doplnky')}</p>`;
return;
}
// Rozdělit doplňky podle skupiny
const skupiny = {};
const samostatne = [];
doplnky.forEach(dp => {
if (dp.skupina) {
if (!skupiny[dp.skupina]) skupiny[dp.skupina] = [];
skupiny[dp.skupina].push(dp);
} else {
samostatne.push(dp);
}
});
const dpLabel = dp => esc((LANG !== 'cs' && dp['nazev_' + LANG]) || dp.nazev);
const dpTypLabel = dp => {
const pocetNociZobr = S.pocetNoci || 1;
const pocetHostuZobr = S.pocetHostu || 1;
return dp.typ_uctovani === 'za_noc'
? (LANG === 'cs' ? `celkem za ${pocetNociZobr} ${pocetNociZobr===1?'noc':pocetNociZobr<5?'noci':'nocí'}` : LANG === 'de' ? `gesamt für ${pocetNociZobr} Nächte` : `total for ${pocetNociZobr} night${pocetNociZobr===1?'':'s'}`)
: dp.typ_uctovani === 'za_osobu_noc'
? (LANG === 'cs' ? `celkem za pobyt (${pocetHostuZobr} ${pocetHostuZobr===1?'host':pocetHostuZobr<5?'hosté':'hostů'})` : LANG === 'de' ? `gesamt für den Aufenthalt (${pocetHostuZobr} Gäste)` : `total for the stay (${pocetHostuZobr} guests)`)
: (LANG === 'cs' ? 'jednorázově' : LANG === 'de' ? 'einmalig' : 'one-time');
};
let html = '';
// Skupinové doplňky — radio výběr (max 1 z každé skupiny)
Object.entries(skupiny).forEach(([nazevSkupiny, polozky]) => {
html += `<div class="doplnek-skupina" style="margin-bottom:14px">`;
html += `<div style="display:flex;flex-direction:column;gap:8px">`;
html += `
<label class="doplnek-radio-row" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--gray-200);border-radius:8px;cursor:pointer">
<input type="radio" name="skupina-${esc(nazevSkupiny)}" ${!polozky.some(p => S.doplnkyZapnute[p.id]) ? 'checked' : ''}
onchange="vybratZeSkupiny('${esc(nazevSkupiny)}', null)" style="margin:0">
<span style="flex:1;font-size:14px">${t('bez_stravovani') || 'Bez stravování'}</span>
</label>`;
polozky.forEach(dp => {
const nedostupny = !dp.dostupny;
html += `
<label class="doplnek-radio-row" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--gray-200);border-radius:8px;cursor:${nedostupny?'default':'pointer'};${nedostupny?'opacity:.5':''}">
<input type="radio" name="skupina-${esc(nazevSkupiny)}" ${S.doplnkyZapnute[dp.id] ? 'checked' : ''} ${nedostupny?'disabled':''}
onchange="vybratZeSkupiny('${esc(nazevSkupiny)}', ${dp.id})" style="margin:0">
<span style="flex:1;font-size:14px">${dpLabel(dp)}</span>
<span style="font-size:13px;color:var(--gray-500)">${formatCena(dp.cena_celkem)} ${dpTypLabel(dp)}</span>
</label>`;
});
html += `</div></div>`;
});
// Samostatné doplňky — stávající toggle logika
samostatne.forEach(dp => {
const zapnuto = S.doplnkyZapnute[dp.id] || false;
const nedostupny = !dp.dostupny;
// Parkování blokované když je vybráno dobíjení
const dobijeniZapnuto = S.doplnkyZapnute[S.dobijeniId];
const jeParkovani = dp.id === S.parkovaniId;
const blokovanoDobi = jeParkovani && dobijeniZapnuto;
const kapInfo = dp.kapacita_zbyva !== undefined && !nedostupny
? ` · ${dp.kapacita_zbyva} volných míst` : '';
let duvodHtml = '';
if (nedostupny) {
const duvodText = dp.duvod_nedostupnosti || t('doplnek_vycerpano');
duvodHtml = `<div class="doplnek-nedostupny-text">${esc(duvodText)}</div>`;
} else if (blokovanoDobi) {
duvodHtml = `<div class="doplnek-nedostupny-text">${t('doplnek_parkovani_blok')}</div>`;
}
const jeDisabled = nedostupny || blokovanoDobi;
const rowCls = jeDisabled ? 'doplnek-row nedostupny' : 'doplnek-row';
html += `
<div class="${rowCls}" id="dp-row-${dp.id}">
<div class="doplnek-info">
<div class="doplnek-nazev">${dpLabel(dp)}</div>
<div class="doplnek-cena">${formatCena(dp.cena_celkem)} ${dpTypLabel(dp)}${kapInfo}</div>
${duvodHtml}
</div>
<button class="toggle ${zapnuto && !jeDisabled ? 'on' : ''}"
${jeDisabled ? 'disabled' : ''}
id="dp-toggle-${dp.id}"
onclick="prepnoutDoplnek(${dp.id}, this)">
</button>
</div>`;
});
container.innerHTML = html;
aktualizujShrnuti();
}
function vybratZeSkupiny(nazevSkupiny, vybranyId) {
// Najít všechny doplňky v této skupině a vypnout je, kromě vybraného
const vsechnyDoplnky = (window._doplnkyCache && window._doplnkyCache.doplnky) || [];
vsechnyDoplnky.filter(d => d.skupina === nazevSkupiny).forEach(d => {
S.doplnkyZapnute[d.id] = (d.id === vybranyId);
});
aktualizujShrnuti();
}
function prepnoutDoplnek(id, btn) {
const zapnuto = !btn.classList.contains('on');
btn.classList.toggle('on', zapnuto);
S.doplnkyZapnute[id] = zapnuto;
// Logika: dobíjení blokuje parkování
if (id === S.dobijeniId && S.parkovaniId) {
const parRow = $('dp-row-' + S.parkovaniId);
const parToggle = $('dp-toggle-' + S.parkovaniId);
const parDp = S.doplnky.find(d => d.id === S.parkovaniId);
if (parRow && parToggle) {
if (zapnuto) {
// Dobíjení zapnuto → zablokuj parkování
parRow.classList.add('nedostupny');
parToggle.disabled = true;
parToggle.classList.remove('on');
S.doplnkyZapnute[S.parkovaniId] = false;
// Přidej text
let hint = parRow.querySelector('.doplnek-nedostupny-text');
if (!hint) {
hint = document.createElement('div');
hint.className = 'doplnek-nedostupny-text';
parRow.querySelector('.doplnek-info').appendChild(hint);
}
hint.textContent = t('doplnek_parkovani_blok');
} else {
// Dobíjení vypnuto → odblokuj parkování (pokud není jinak nedostupné)
if (parDp && parDp.dostupny) {
parRow.classList.remove('nedostupny');
parToggle.disabled = false;
const hint = parRow.querySelector('.doplnek-nedostupny-text');
if (hint) hint.remove();
}
}
}
}
aktualizujShrnuti();
}
// ============================================================
// FIRMA TOGGLE
// ============================================================
function toggleFirma() {
const cb = $('naFirmaCb');
const fields = $('firmaFields');
if (event.target !== cb) cb.checked = !cb.checked;
fields.classList.toggle('visible', cb.checked);
}
// ============================================================
// SHRNUTÍ
// ============================================================
function aktualizujShrnuti() {
S.pocetHostu = parseInt($('pocetHostu')?.value || '2');
const body = $('shrnutiBody');
const celkem = $('shrnutiCelkem');
if (!S.datumOd || !S.datumDo) {
body.innerHTML = `<div class="shrnuti-prazdny">${t('shrnuti_prazdny')}</div>`;
celkem.style.display = 'none'; return;
}
let radky = '';
let suma = 0;
radky += `<div class="shrnuti-radek"><span>${t('lbl_prijezd')}</span><span class="val">${formatDatumCS(S.datumOd)}</span></div>`;
radky += `<div class="shrnuti-radek"><span>${t('lbl_odjezd')}</span><span class="val">${formatDatumCS(S.datumDo)}</span></div>`;
radky += `<div class="shrnuti-radek"><span>${t('lbl_noci')}</span><span class="val">${S.pocetNoci}</span></div>`;
if (S.typData) {
const cenaNoc = parseFloat(S.typData.cena_za_noc);
const cenaBase = cenaNoc * S.pocetNoci;
const sleva = S.typData.sleva_castka_pobyt || 0;
const cenaFinal= S.typData.cena_po_sleve || cenaBase;
suma += cenaFinal;
radky += `<div class="shrnuti-radek"><span>${esc(S.typData.nazev)}</span><span class="val">${formatCena(cenaFinal)}</span></div>`;
if (sleva > 0) {
radky += `<div class="shrnuti-radek"><span>🏷 ${t('pokoj_sleva', {n: S.typData.sleva_jednoluzko_procent})}</span><span class="sleva-val">- ${formatCena(sleva)}</span></div>`;
}
}
S.doplnky.forEach(dp => {
if (S.doplnkyZapnute[dp.id] && dp.dostupny) {
suma += dp.cena_celkem;
radky += `<div class="shrnuti-radek"><span>${esc((LANG !== 'cs' && dp['nazev_' + LANG]) || dp.nazev)}</span><span class="val">${formatCena(dp.cena_celkem)}</span></div>`;
}
});
body.innerHTML = radky;
if (S.typData) {
celkem.style.display = 'flex';
$('shrnutiCastka').textContent = formatCena(suma);
} else {
celkem.style.display = 'none';
}
}
// ============================================================
// ODESLÁNÍ
// ============================================================
async function odeslat() {
const jmeno = $('jmeno').value.trim();
const prijmeni = $('prijmeni').value.trim();
const email = $('email').value.trim();
const telefon = $('telefon').value.trim();
const naFirmu = $('naFirmaCb').checked;
const firma = $('firma').value.trim();
let ok = true;
setFieldError('fJmeno', !jmeno);
setFieldError('fPrijmeni', !prijmeni);
setFieldError('fEmail', !email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));
setFieldError('fTelefon', !telefon);
if (naFirmu) setFieldError('fFirma', !firma);
if (!jmeno || !prijmeni || !email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) || !telefon) ok = false;
if (naFirmu && !firma) ok = false;
if (!ok) return;
const btn = $('btnOdeslat');
btn.disabled = true; btn.textContent = '…';
schovejAlert('alertKontakt');
const vyberaneDoplnky = S.doplnky
.filter(dp => S.doplnkyZapnute[dp.id] && dp.dostupny)
.map(dp => dp.id);
const payload = {
typ_id: S.typId,
datum_prijezdu: S.datumOd,
datum_odjezdu: S.datumDo,
pocet_hostu: S.pocetHostu,
jmeno, prijmeni, email, telefon,
poznamka: $('poznamka').value.trim(),
na_firmu: naFirmu,
firma: $('firma').value.trim(),
ico: $('ico').value.trim(),
dic: $('dic').value.trim(),
faktura_ulice: $('faktura_ulice').value.trim(),
faktura_psc: $('faktura_psc').value.trim(),
faktura_mesto: $('faktura_mesto').value.trim(),
doplnky: vyberaneDoplnky,
jazyk: LANG,
};
try {
const r = await fetch(API + '/guest/vytvorit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
// Přečíst response jako text nejdřív pro lepší diagnostiku
const responseText = await r.text();
let d;
try {
d = JSON.parse(responseText);
} catch(jsonErr) {
console.error('Server vrátil nevalidní JSON:', responseText.substring(0, 500));
zobrazAlert('alertKontakt', 'Chyba serveru. Podrobnosti viz konzole (F12).', 'error');
btn.disabled = false; btn.textContent = t('btn_odeslat');
return;
}
if (!d.ok) {
zobrazAlert('alertKontakt', d.error || t('err_obecna'), 'error');
btn.disabled = false; btn.textContent = t('btn_odeslat');
return;
}
zobrazPotvrzeni(jmeno, prijmeni, email, naFirmu ? firma : null);
} catch(e) {
// Zkusit přečíst raw response pro diagnostiku
console.error('Chyba odeslání:', e);
zobrazAlert('alertKontakt', t('err_pripojeni') + ' (' + e.message + ')', 'error');
btn.disabled = false; btn.textContent = t('btn_odeslat');
}
}
function zobrazPotvrzeni(jmeno, prijmeni, email, firma) {
$('potvrzeniText').textContent = t('potvrzeni_email', {email});
const checkin = S.nastaveni.checkin_cas || '14:00';
const checkout = S.nastaveni.checkout_cas || '10:00';
// Sestavit zobrazované jméno: Jméno Příjmení (Firma)
let hostLabel = esc(jmeno) + ' ' + esc(prijmeni);
if (firma) hostLabel += ' <span style="color:var(--gray-500);font-weight:400">(' + esc(firma) + ')</span>';
$('potvrzeniDetail').innerHTML = `
<div class="potvrzeni-detail-radek"><span>${t('potvrzeni_host')}</span><strong>${hostLabel}</strong></div>
<div class="potvrzeni-detail-radek"><span>${t('potvrzeni_prijezd')}</span><strong>${formatDatumCS(S.datumOd)} ${checkin}</strong></div>
<div class="potvrzeni-detail-radek"><span>${t('potvrzeni_odjezd')}</span><strong>${formatDatumCS(S.datumDo)} ${checkout}</strong></div>
<div class="potvrzeni-detail-radek"><span>${t('potvrzeni_pokoj')}</span><strong>${esc(S.typData?.nazev||'—')}</strong></div>`;
['krok1','krok2','krok3','krok4'].forEach(id => { $(id).style.display = 'none'; });
$('krokPotvrzeni').style.display = '';
for (let i = 1; i <= 4; i++) {
const el = $('krokEl'+i);
if (el) { el.className = 'krok hotovo'; el.querySelector('.krok-num').textContent = '✓'; }
}
window.scrollTo({top:0,behavior:'smooth'});
}
function novaRezervace() {
Object.assign(S, {krok:1,datumOd:null,datumDo:null,pocetNoci:0,typId:null,typData:null,doplnky:[],doplnkyZapnute:{}});
['jmeno','prijmeni','email','telefon','poznamka','firma','ico','dic','faktura_ulice','faktura_psc','faktura_mesto']
.forEach(id => { $(id).value = ''; });
$('naFirmaCb').checked = false;
$('firmaFields').classList.remove('visible');
$('krokPotvrzeni').style.display = 'none';
aktualizujTermin(); naKrok(1);
}
// ============================================================
// HELPERY
// ============================================================
function formatDatum(d) {
return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
}
function formatPsc(el) {
let val = el.value.replace(/\D/g, ''); // jen číslice
if (val.length > 5) val = val.slice(0, 5);
if (val.length > 3) val = val.slice(0, 3) + ' ' + val.slice(3);
el.value = val;
}
function formatDatumCS(str) {
if (!str) return '';
const [r,m,d] = str.split('-');
return parseInt(d)+'. '+t('mesice_gen')[parseInt(m)-1]+' '+r;
}
function pocetNoci(od,do_) { return Math.max(0,Math.round((new Date(do_)-new Date(od))/86400000)); }
function formatCena(c) { return Number(c||0).toLocaleString('cs-CZ')+' Kč'; }
function zobrazAlert(id,msg,typ) { const el=$(id); if(el) el.innerHTML=`<div class="alert alert-${typ}">${esc(msg)}</div>`; }
function schovejAlert(id) { const el=$(id); if(el) el.innerHTML=''; }
function setFieldError(fid,chyba) { const el=$(fid); if(el) el.classList.toggle('error',chyba); }
// Kalendář — event listenery (delegace na document)
document.addEventListener('click', function(e) {
const boxOd = $('boxOd');
const boxDo = $('boxDo');
const wrap = $('kalendarWrap');
if (!wrap) return;
// Klik na příjezd
if (boxOd && (boxOd === e.target || boxOd.contains(e.target))) {
otevritKalendar('od'); return;
}
// Klik na odjezd
if (boxDo && (boxDo === e.target || boxDo.contains(e.target))) {
otevritKalendar('do'); return;
}
// Klik mimo kalendář — zavřít
if (wrap.classList.contains('otevreny') && !wrap.contains(e.target)) {
kalZavrit();
}
});
// ============================================================
// ARES — vyhledávání firmy podle IČ
// ============================================================
async function aresVyhledat() {
const ico = $('ico').value.trim().replace(/\s/g, '');
const statusEl = $('aresStatus');
const btn = $('btnAres');
if (!ico || ico.length < 6) {
statusEl.className = 'ares-status err';
statusEl.textContent = 'Zadejte platné IČ (6–8 číslic).';
return;
}
btn.disabled = true;
statusEl.className = 'ares-status loading';
statusEl.textContent = '⏳ Vyhledávám v registru ARES…';
try {
const r = await fetch(
'https://ares.gov.cz/ekonomicke-subjekty-v-be/rest/ekonomicke-subjekty/' + ico,
{ headers: { 'Accept': 'application/json' } }
);
if (!r.ok) {
throw new Error(r.status === 404
? 'Subjekt s tímto IČ nebyl nalezen.'
: 'Chyba při komunikaci s ARES (kód ' + r.status + ').');
}
const d = await r.json();
// Název firmy
const nazev = d.obchodniJmeno || d.nazev || '';
if (nazev) $('firma').value = nazev;
// DIČ
const dic = d.dic || '';
if (dic) $('dic').value = dic;
// Adresa — ARES vrací sidlo
const sidlo = d.sidlo || {};
const ulice = sidlo.nazevUlice || sidlo.nazevObce || '';
const cisloD = sidlo.cisloDomovni || '';
const cisloO = sidlo.cisloOrientacni || '';
const psc = sidlo.psc || sidlo.psc || '';
const obec = sidlo.nazevObce || '';
// Sestavit ulici
let ulicePlna = ulice;
if (cisloD) ulicePlna += ' ' + cisloD;
if (cisloO) ulicePlna += '/' + cisloO;
if (ulicePlna.trim()) $('faktura_ulice').value = ulicePlna.trim();
// PSČ — formátovat jako "123 45"
if (psc) {
const pscStr = String(psc).replace(/\s/g, '');
$('faktura_psc').value = pscStr.length === 5
? pscStr.slice(0,3) + ' ' + pscStr.slice(3)
: pscStr;
}
if (obec) $('faktura_mesto').value = obec;
statusEl.className = 'ares-status ok';
statusEl.textContent = '✓ Údaje byly doplněny z registru ARES.';
} catch (e) {
statusEl.className = 'ares-status err';
statusEl.textContent = '✗ ' + (e.message || 'Nepodařilo se načíst data z ARES.');
} finally {
btn.disabled = false;
}
}
// Automatické načtení při odchodu z pole IČ
function aresAutoVyhledat() {
const ico = $('ico').value.trim().replace(/\s/g, '');
// Spustit jen pokud IČ vypadá validně (6-8 číslic) a ještě nebylo načteno
if (ico.length >= 6 && /^\d+$/.test(ico)) {
const statusEl = $('aresStatus');
// Nenačítat znovu pokud už máme OK status pro stejné IČ
if (statusEl && statusEl.classList.contains('ok')) return;
aresVyhledat();
}
}
function aresReset() {
const el = $('aresStatus');
if (el) { el.className = 'ares-status'; el.textContent = ''; }
}
init();
</script>
<footer class="footer">
<span data-i18n="lbl_created_by">Rezervační systém vytvořil</span>
<a href="https://jservices.cz" target="_blank" rel="noopener">J Services</a>
</footer>
</body>
</html>