<div class=“bh-bar“ data-key=“2060570a24c9ae440cb3c4f204409906″ data-variation=“535″ data-lang=“cs“>
<div class=“bh-grid“>
<div class=“bh-field“>
<label for=“bh-arr“>Příjezd</label>
<input type=“date“ id=“bh-arr“ required>
</div>
<div class=“bh-field“>
<label for=“bh-dep“>Odjezd</label>
<input type=“date“ id=“bh-dep“ required>
</div>
<div class=“bh-field“>
<label for=“bh-persons“>Osoby</label>
<input type=“number“ id=“bh-persons“ min=“1″ value=“2″ required>
</div>
<div class=“bh-actions“>
<button id=“bh-search-all“ class=“bh-btn bh-btn–primary“>Hledat ubytování</button>
</div>
</div>
</div>
<script>
(function(){
const wrap = document.currentScript.previousElementSibling;
const KEY = wrap.dataset.key;
const VAR = wrap.dataset.variation;
const LANG = wrap.dataset.lang || ‚cs‘;
const arrEl = wrap.querySelector(‚#bh-arr‘);
const depEl = wrap.querySelector(‚#bh-dep‘);
const personsEl = wrap.querySelector(‚#bh-persons‘);
const btnAll = wrap.querySelector(‚#bh-search-all‘);
// default: zítřek +3 noci
function iso(d){ return d.toISOString().slice(0,10); }
(function setDefaults(){
const now = new Date();
const arr = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
const dep = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 4);
if(!arrEl.value) arrEl.value = iso(arr);
if(!depEl.value) depEl.value = iso(dep);
arrEl.addEventListener(‚change‘, ()=>{
const a = new Date(arrEl.value);
const d = new Date(depEl.value || arrEl.value);
if(d <= a){ d.setDate(a.getDate()+2); depEl.value = iso(d); }
depEl.min = iso(new Date(a.getFullYear(), a.getMonth(), a.getDate()+1));
});
})();
function buildIBEUrl(arrival, departure, persons){
const u = new URL(„https://ibe.better-hotel.com/“);
u.searchParams.set(„key“, KEY);
u.searchParams.set(„variation“, VAR);
u.searchParams.set(„arrival“, arrival);
u.searchParams.set(„departure“, departure);
u.searchParams.set(„persons“, persons || „2“);
u.searchParams.set(„lang“, LANG);
// volitelné: přenes UTM parametry z aktuální URL
const qp = new URLSearchParams(window.location.search);
[‚utm_source‘,’utm_medium‘,’utm_campaign‘,’utm_content‘,’utm_term‘].forEach(p=>{
if(qp.get(p)) u.searchParams.set(p, qp.get(p));
});
return u.toString();
}
btnAll.addEventListener(‚click‘, ()=>{
const a = arrEl.value, d = depEl.value, p = personsEl.value || „2“;
if(!a || !d){ alert(„Zvolte příjezd i odjezd.“); return; }
window.location.href = buildIBEUrl(a,d,p); // otevři v téže záložce
});
})();
</script>
<style>
.bh-bar{background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:14px;max-width:980px;margin:0 auto}
.bh-grid{display:grid;gap:.75rem;align-items:end;grid-template-columns:1fr 1fr .7fr auto}
.bh-field{display:flex;flex-direction:column;gap:6px}
.bh-field label{font-size:.9rem;color:#333}
.bh-field input{padding:12px;border:1px solid #ddd;border-radius:10px}
.bh-actions{display:flex;gap:.5rem}
.bh-btn{padding:12px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.bh-btn–primary{background:#036400;color:#fff}
@media (max-width:760px){.bh-grid{grid-template-columns:1fr}.bh-actions{flex-direction:column}.bh-btn{width:100%}}
</style>