var/cache/dev/twig/b2/b235627aac0ae83b7fecef526a344b5f.php line 49

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* vitrine/en/homepage.html.twig */
  18. class __TwigTemplate_44de184e5eb1317f89ee043904cd3b74 extends Template
  19. {
  20. private Source $source;
  21. /**
  22. * @var array<string, Template>
  23. */
  24. private array $macros = [];
  26. public function __construct(Environment $env)
  27. {
  28. parent::__construct($env);
  30. $this->source = $this->getSourceContext();
  32. $this->blocks = [
  33. 'title' => [$this, 'block_title'],
  34. 'description' => [$this, 'block_description'],
  35. 'robots' => [$this, 'block_robots'],
  36. 'canonical' => [$this, 'block_canonical'],
  37. 'body' => [$this, 'block_body'],
  38. 'footerjs' => [$this, 'block_footerjs'],
  39. 'css' => [$this, 'block_css'],
  40. ];
  41. }
  43. protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  44. {
  45. // line 1
  46. return "vitrine/en/layout.html.twig";
  47. }
  49. protected function doDisplay(array $context, array $blocks = []): iterable
  50. {
  51. $macros = $this->macros;
  52. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  53. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "vitrine/en/homepage.html.twig"));
  55. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  56. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "vitrine/en/homepage.html.twig"));
  58. $this->parent = $this->load("vitrine/en/layout.html.twig", 1);
  59. yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  61. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  64. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  66. }
  68. // line 3
  69. /**
  70. * @return iterable<null|scalar|\Stringable>
  71. */
  72. public function block_title(array $context, array $blocks = []): iterable
  73. {
  74. $macros = $this->macros;
  75. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  76. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  78. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  79. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  81. yield "Cathedral Heritage Suite - 8-Guest Rental Strasbourg Center";
  83. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  86. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  88. yield from [];
  89. }
  91. // line 4
  92. /**
  93. * @return iterable<null|scalar|\Stringable>
  94. */
  95. public function block_description(array $context, array $blocks = []): iterable
  96. {
  97. $macros = $this->macros;
  98. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  99. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "description"));
  101. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  102. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "description"));
  104. yield "Rent our 83m² suite in the heart of Strasbourg. 3 bedrooms, sleeps 8, 100m from Cathedral. Kitchen fully furnished, 2 bathrooms. Book your stay today!";
  106. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  109. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  111. yield from [];
  112. }
  114. // line 5
  115. /**
  116. * @return iterable<null|scalar|\Stringable>
  117. */
  118. public function block_robots(array $context, array $blocks = []): iterable
  119. {
  120. $macros = $this->macros;
  121. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  122. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "robots"));
  124. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  125. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "robots"));
  127. yield "index,follow";
  129. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  132. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  134. yield from [];
  135. }
  137. // line 7
  138. /**
  139. * @return iterable<null|scalar|\Stringable>
  140. */
  141. public function block_canonical(array $context, array $blocks = []): iterable
  142. {
  143. $macros = $this->macros;
  144. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  145. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "canonical"));
  147. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  148. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "canonical"));
  150. // line 8
  151. yield " <link rel=\"canonical\" href=\"https://cathedraleheritage.com\" />
  152. <link rel=\"alternate\" hreflang=\"fr\" href=\"https://cathedraleheritage.com/fr\" />
  153. <link rel=\"alternate\" hreflang=\"en\" href=\"https://cathedraleheritage.com\" />
  154. <link rel=\"alternate\" hreflang=\"x-default\" href=\"https://cathedraleheritage.com\" />
  155. ";
  157. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  160. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  162. yield from [];
  163. }
  165. // line 14
  166. /**
  167. * @return iterable<null|scalar|\Stringable>
  168. */
  169. public function block_body(array $context, array $blocks = []): iterable
  170. {
  171. $macros = $this->macros;
  172. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  173. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  175. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  176. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  178. // line 15
  179. yield "
  180. <section id=\"hero\" class=\"text-light no-top no-bottom relative overflow-hidden z-1000\">
  181. <div class=\"abs w-100 abs-centered z-2\">
  182. <div class=\"container\">
  183. <div class=\"spacer-double\"></div>
  184. <div class=\"row g-4 align-items-center justify-content-center\">
  185. <div class=\"col-md-8 text-center\">
  186. <h1 class=\"mb-2\" style=\"color:white;\">Welcome to Cathedral Heritage Suite</h1>
  187. <p class=\"lead mb-3\" style=\"color:white; font-size:22px;\">Beautifully appointed apartment accommodating up to 8 guests in Strasbourg's prestigious historical city center</p>
  188. <a class=\"btn-main btn-line bg-blur fx-slide\" href=\"#about\" style=\"color:white;\"><span>Find out more</span></a>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. <div class=\"vertical-center\">
  194. <div class=\"swiper\">
  195. <div class=\"swiper-wrapper\">
  196. <div class=\"swiper-slide\">
  197. <div class=\"swiper-inner\" data-bgimage=\"url(/images/salon2.jpeg)\">
  198. <div class=\"sw-overlay op-5\"></div>
  199. </div>
  200. </div>
  201. <div class=\"swiper-slide\">
  202. <div class=\"swiper-inner\" data-bgimage=\"url(/images/chambre2.jpeg)\">
  203. <div class=\"sw-overlay op-5\"></div>
  204. </div>
  205. </div>
  206. <div class=\"swiper-slide\">
  207. <div class=\"swiper-inner\" data-bgimage=\"url(/images/noel.jpeg)\">
  208. <div class=\"sw-overlay op-5\"></div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  215. <div class=\"abs w-100 bottom-0 z-2 pb-4 sm-hide\">
  216. <div class=\"container\">
  217. <div class=\"row\">
  218. <div class=\"col-lg-12\">
  219. <div class=\"d-flex justify-content-between\">
  220. <div><h6 style=\"color:white;\">Cathedral 100m away</h6></div>
  221. <div><h6 style=\"color:white;\">Museums 200m away</h6></div>
  222. <div><h6 style=\"color:white;\">Petite France 300m away</h6></div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. <div class=\"gradient-edge-bottom op-8\"></div>
  229. </section>
  231. <section id=\"about\">
  232. <div class=\"container\">
  233. <div class=\"row g-4 align-items-end justify-content-between\">
  234. <div class=\"col-lg-5\">
  235. <div class=\"subtitle\">About the apartment</div>
  236. <h2>Modern suite in the heart of Strasbourg's Grande Île</h2>
  237. </div>
  239. <div class=\"col-lg-4\">
  240. <p class=\"mb-4\" style=\"color:#212121;\">
  241. Spacious fully equipped appartement ideal for families and groups up to 8 people : 1 master bedroom with en-suite bathroom, one double bedroom, one bedroom with two double bunk beds (sleeps 4), maximum weight of 100kg for upper bunks.
  242. </p>
  243. <p class=\"mb-4\" style=\"color:#212121;\">
  244. Kitchen fully furnished and cozy living-dining room to share great moments together.
  245. </p>
  246. <p class=\"mb-4\" style=\"color:#212121;\">
  247. Amenities: hairdryer, dishwasher, washer-dryer, microwave, oven, ironing board with iron, Nespresso coffee machine, kettle, TV, Wi-Fi and USB outlets for charging your devices.
  248. </p>
  249. </div>
  250. </div>
  252. <div class=\"spacer-single\"></div>
  254. <div class=\"row g-4\">
  255. <div class=\"col-md-2\">
  256. <div class=\"relative\">
  257. <h5>Size</h5>
  258. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:6px;\">
  259. <img src=\"/images/home.png\" width=\"37\" class=\"me-3\" alt=\"\">
  260. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">83 m²</div>
  261. </div>
  262. </div>
  263. </div>
  265. <div class=\"col-md-2\">
  266. <div class=\"relative\">
  267. <h5>Bedrooms</h5>
  268. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:4px;\">
  269. <img src=\"/images/bed.png\" width=\"37\" class=\"me-3\" alt=\"\">
  270. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">3</div>
  271. </div>
  272. </div>
  273. </div>
  275. <div class=\"col-md-2\">
  276. <div class=\"relative\">
  277. <h5>Living Room</h5>
  278. <div class=\"d-flex justify-content-start align-items-center\">
  279. <img src=\"/images/sofa.png\" width=\"50\" class=\"me-3\" alt=\"\">
  280. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">Included</div>
  281. </div>
  282. </div>
  283. </div>
  285. <div class=\"col-md-2\">
  286. <div class=\"relative\">
  287. <h5>Kitchen</h5>
  288. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:6px;\">
  289. <img src=\"/images/cooking.png\" width=\"37\" class=\"me-3\" alt=\"\">
  290. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">Included</div>
  291. </div>
  292. </div>
  293. </div>
  295. <div class=\"col-md-2\">
  296. <div class=\"relative\">
  297. <h5>Bathrooms</h5>
  298. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:4px;\">
  299. <img src=\"/images/bathroom.png\" width=\"40\" class=\"me-3\" alt=\"\">
  300. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">2</div>
  301. </div>
  302. </div>
  303. </div>
  305. <div class=\"col-md-2\">
  306. <div class=\"relative\">
  307. <h5>Guests</h5>
  308. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:5px;\">
  309. <img src=\"/images/user.png\" width=\"37\" class=\"me-3\" alt=\"\">
  310. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">8</div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. </div>
  316. </section>
  318. <section id=\"rooms\" class=\"p-0 overflow-hidden\">
  320. <div class=\"container-fluid\">
  321. <div class=\"row\">
  322. <div class=\"col-lg-12\">
  323. <div class=\"owl-custom-nav menu-float\" data-target=\"#room-carousel\">
  324. <a class=\"btn-next\"></a>
  325. <a class=\"btn-prev\"></a>
  327. <div id=\"room-carousel\" class=\"owl-2-cols-center owl-carousel owl-theme\">
  329. <div class=\"item\">
  330. <div class=\"relative\">
  331. <div class=\"overflow-hidden text-light\">
  332. <div class=\"abs h-100 start-0 z-2 p-4\">
  333. <h3 style=\"color:white;\">Living Room</h3>
  334. </div>
  335. <img src=\"/images/salon2.jpeg\" class=\"w-100\" alt=\"Living Room\">
  336. </div>
  337. </div>
  338. </div>
  340. <div class=\"item\">
  341. <div class=\"relative\">
  342. <div class=\"overflow-hidden text-light\">
  343. <div class=\"abs h-100 start-1 z-2 p-4\">
  344. <h3 style=\"color:white;\">Bedroom 1</h3>
  345. </div>
  346. <img src=\"/images/chambre1.jpeg\" class=\"w-100\" alt=\"Bedroom 1\">
  347. </div>
  348. </div>
  349. </div>
  351. <div class=\"item\">
  352. <div class=\"relative\">
  353. <div class=\"overflow-hidden text-light\">
  354. <div class=\"abs h-100 start-2 z-2 p-4\">
  355. <h3 style=\"color:white;\">Bedroom 2</h3>
  356. </div>
  357. <img src=\"/images/chambre2.jpeg\" class=\"w-100\" alt=\"Bedroom 2\">
  358. </div>
  359. </div>
  360. </div>
  362. <div class=\"item\">
  363. <div class=\"relative\">
  364. <div class=\"overflow-hidden text-light\">
  365. <div class=\"abs h-100 start-3 z-2 p-4\">
  366. <h3 style=\"color:white;\">Bedroom 3</h3>
  367. </div>
  368. <img src=\"/images/chambre3.jpeg\" class=\"w-100\" alt=\"Bedroom 3\">
  369. </div>
  370. </div>
  371. </div>
  373. <div class=\"item\">
  374. <div class=\"relative\">
  375. <div class=\"overflow-hidden text-light\">
  376. <div class=\"abs h-100 start-4 z-2 p-4\">
  377. <h3 style=\"color:white;\">Kitchen</h3>
  378. </div>
  379. <img src=\"/images/cuisine.jpeg\" class=\"w-100\" alt=\"Kitchen\">
  380. </div>
  381. </div>
  382. </div>
  384. <div class=\"item\">
  385. <div class=\"relative\">
  386. <div class=\"overflow-hidden text-light\">
  387. <div class=\"abs h-100 start-5 z-2 p-4\">
  388. <h3 style=\"color:white;\">Bathroom</h3>
  389. </div>
  390. <img src=\"/images/salledebain.jpeg\" class=\"w-100\" alt=\"Bathroom 1\">
  391. </div>
  392. </div>
  393. </div>
  395. <div class=\"item\">
  396. <div class=\"relative\">
  397. <div class=\"overflow-hidden text-light\">
  398. <div class=\"abs h-100 start-6 z-2 p-4\">
  399. <h3 style=\"color:white;\">Bathroom 2</h3>
  400. </div>
  401. <img src=\"/images/salledebain2.jpeg\" class=\"w-100\" alt=\"Bathroom 2\">
  402. </div>
  403. </div>
  404. </div>
  406. </div>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  412. </section>
  414. <section id=\"services\" class=\"overlay-dark-1\">
  415. <div class=\"container\">
  416. <div class=\"row g-4 justify-content-between\">
  417. <div class=\"col-lg-5 relative z-3\">
  418. <div class=\"me-lg-3\">
  419. <div class=\"subtitle wow fadeInUp\" data-wow-delay=\".0s\">Your stay in Strasbourg</div>
  420. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Rates and services</h2>
  421. <p style=\"color:#212121; font-size:18px;\">An exceptional suite in the heart of Strasbourg, with optionnal dedicated concierge service to assist you throughout your stay.</p>
  423. <p style=\"color:#212121; font-size:18px;\">Minimum booking of two nights.</p>
  425. <a href=\"#reservation\" class=\"btn-main\" style=\"color:white;\">Booking</a>
  428. </div>
  429. </div>
  431. <div class=\"col-lg-6\" style=\"color:black;\">
  432. <div class=\"spacer-single spacer-double\"></div>
  433. <div class=\"row\">
  434. <div class=\"col-md-6 wow fadeInUp\" data-wow-delay=\".2s\">
  436. ";
  437. // line 282
  438. yield "
  439. <ul class=\"ul-check fs-500\">
  440. <li>from €350 per night</li>
  441. <li>10% discount for bookings of 7 nights and up</li>
  442. </ul>
  443. </div>
  445. <div class=\"col-md-6 wow fadeInUp\" data-wow-delay=\".4s\">
  446. <h5 class=\"mb-3\">Optional services</h5>
  447. <ul class=\"ul-check fs-500\">
  448. <li>One parking space: €24/day or €150/week</li>
  449. <li>Extra cleaning during your stay : 60 euros</li>
  450. <li>Other Extras : Children's workshop, baby amenities, dog policy on request (other pets are unfortunately not allowed in the appartement), Decoration for special occasions, breakfast, Alsatian delicacies, etc</li>
  451. </ul>
  453. <div class=\"mt-4\">
  454. <p class=\"fs-500\">
  455. <strong>On site assistance</strong> <br />
  456. <small>Tuesday to Saturday • 10am-6:45pm</small>
  457. </p>
  458. <p class=\"fs-500\">
  459. <strong>Private concierge subject to availability</strong><br>
  460. <small>Quotation on request</small>
  461. </p>
  462. </div>
  463. </div>
  464. </div>
  465. </div>
  466. </div>
  469. </div>
  470. </section>
  472. <section id=\"section-gallery\" class=\"relative\">
  473. <div class=\"container relative z-2\" id=\"photos\">
  474. <div class=\"row g-4 gx-5 justify-content-center\">
  475. <div class=\"col-lg-6 text-center\">
  476. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Apartment Gallery</h2>
  477. <p class=\"wow fadeInUp\" data-wow-delay=\".3s\" style=\"color:#212121;\">Explore our curated images to discover the residence's various spaces — from the bedrooms and living area to the kitchen, bathroom, and outdoor surroundings.</p>
  478. </div>
  479. </div>
  481. <div class=\"row\">
  482. <div class=\"col-md-12 text-center\">
  483. <ul id=\"filters\" class=\"wow fadeInUp\" data-wow-delay=\"0s\">
  484. <li><a href=\"#\" data-filter=\"*\" class=\"selected\" style=\"color:#212121;\">Show All</a></li>
  485. <li><a href=\"#\" data-filter=\".chambre\" style=\"color:#212121;\">Bedrooms</a></li>
  486. <li><a href=\"#\" data-filter=\".salon\" style=\"color:#212121;\">Living Room</a></li>
  487. <li><a href=\"#\" data-filter=\".cuisine\" style=\"color:#212121;\">Kitchen</a></li>
  488. <li><a href=\"#\" data-filter=\".salledebain\" style=\"color:#212121;\">Bathroom</a></li>
  489. <li><a href=\"#\" data-filter=\".exterieur\" style=\"color:#212121;\">Outdoor surroundings</a></li>
  490. </ul>
  491. </div>
  492. </div>
  494. <div id=\"gallery\" class=\"row g-3 wow fadeInUp\" data-wow-delay=\".3s\">
  495. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  496. <a href=\"images/chambre1.jpeg\" class=\"image-popup d-block hover\">
  497. <div class=\"relative overflow-hidden\">
  498. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  499. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  500. <img src=\"images/chambre1.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom\">
  501. </div>
  502. </a>
  503. </div>
  504. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  505. <a href=\"images/chambre2.jpeg\" class=\"image-popup d-block hover\">
  506. <div class=\"relative overflow-hidden\">
  507. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  508. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  509. <img src=\"images/chambre2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom 2\">
  510. </div>
  511. </a>
  512. </div>
  513. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  514. <a href=\"images/chambre3.jpeg\" class=\"image-popup d-block hover\">
  515. <div class=\"relative overflow-hidden\">
  516. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  517. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  518. <img src=\"images/chambre3.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom 3\">
  519. </div>
  520. </a>
  521. </div>
  522. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  523. <a href=\"images/salon.jpeg\" class=\"image-popup d-block hover\">
  524. <div class=\"relative overflow-hidden\">
  525. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  526. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  527. <img src=\"images/salon.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room\">
  528. </div>
  529. </a>
  530. </div>
  531. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  532. <a href=\"images/salon2.jpeg\" class=\"image-popup d-block hover\">
  533. <div class=\"relative overflow-hidden\">
  534. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  535. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  536. <img src=\"images/salon2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 2\">
  537. </div>
  538. </a>
  539. </div>
  540. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  541. <a href=\"images/salon3.jpeg\" class=\"image-popup d-block hover\">
  542. <div class=\"relative overflow-hidden\">
  543. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  544. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  545. <img src=\"images/salon3.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 3\">
  546. </div>
  547. </a>
  548. </div>
  549. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  550. <a href=\"images/salon4.jpeg\" class=\"image-popup d-block hover\">
  551. <div class=\"relative overflow-hidden\">
  552. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  553. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  554. <img src=\"images/salon4.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 4\">
  555. </div>
  556. </a>
  557. </div>
  558. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  559. <a href=\"images/salon5.jpeg\" class=\"image-popup d-block hover\">
  560. <div class=\"relative overflow-hidden\">
  561. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  562. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  563. <img src=\"images/salon5.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 5\">
  564. </div>
  565. </a>
  566. </div>
  567. <div class=\"col-md-3 col-sm-6 col-12 item cuisine\">
  568. <a href=\"images/cuisine.jpeg\" class=\"image-popup d-block hover\">
  569. <div class=\"relative overflow-hidden\">
  570. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  571. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  572. <img src=\"images/cuisine.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Kitchen\">
  573. </div>
  574. </a>
  575. </div>
  576. <div class=\"col-md-3 col-sm-6 col-12 item salledebain\">
  577. <a href=\"images/salledebain.jpeg\" class=\"image-popup d-block hover\">
  578. <div class=\"relative overflow-hidden\">
  579. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  580. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  581. <img src=\"images/salledebain.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bathroom\">
  582. </div>
  583. </a>
  584. </div>
  585. <div class=\"col-md-3 col-sm-6 col-12 item salledebain\">
  586. <a href=\"images/salledebain2.jpeg\" class=\"image-popup d-block hover\">
  587. <div class=\"relative overflow-hidden\">
  588. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  589. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  590. <img src=\"images/salledebain2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bathroom 2\">
  591. </div>
  592. </a>
  593. </div>
  594. <div class=\"col-md-3 col-sm-6 col-12 item exterieur\">
  595. <a href=\"images/exterieur.jpeg\" class=\"image-popup d-block hover\">
  596. <div class=\"relative overflow-hidden\">
  597. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  598. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  599. <img src=\"images/exterieur.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Exterior\">
  600. </div>
  601. </a>
  602. </div>
  603. </div>
  605. </div>
  606. </section>
  608. ";
  609. // line 453
  610. yield " ";
  611. // line 454
  612. yield " ";
  613. // line 455
  614. yield " <section id=\"reservation\" class=\"text-light\">
  615. <div class=\"container\">
  616. <div class=\"row g-4 justify-content-center\">
  617. <div class=\"col-lg-6 text-center\">
  618. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Book your stay</h2>
  619. </div>
  620. </div>
  622. <div class=\"row g-4 justify-content-center\">
  623. <div class=\"col-lg-8\">
  624. <div class=\"booking-card\">
  625. ";
  626. // line 466
  627. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderBlock((isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 466, $this->source); })()), 'form_start');
  628. yield "
  630. ";
  631. // line 469
  632. yield " <div class=\"calendar-container\" style=\"height:300px;\">
  633. <input type=\"text\" id=\"date_range_picker\">
  634. </div>
  636. ";
  637. // line 474
  638. yield " <div class=\"row g-3 mt-2 dates-recap\">
  639. <div class=\"col-4 text-center\">
  640. <div class=\"recap-label\">Arrival</div>
  641. <div class=\"recap-value\" id=\"info-start\">-</div>
  642. </div>
  643. <div class=\"col-4 text-center\">
  644. <div class=\"recap-label\">Departure</div>
  645. <div class=\"recap-value\" id=\"info-end\">-</div>
  646. </div>
  647. <div class=\"col-4 text-center\">
  648. <div class=\"recap-label\">Nights</div>
  649. <div class=\"recap-value\" id=\"info-nights\">-</div>
  650. </div>
  651. </div>
  653. <hr class=\"booking-divider\">
  655. ";
  656. // line 492
  657. yield " <h4 class=\"booking-title\">Select rooms and guests</h4>
  659. <div class=\"counter-row\">
  660. <div class=\"counter-label\">
  661. <div class=\"counter-title\">Bedrooms</div>
  662. <div class=\"counter-sub\">Set by guest count</div>
  663. </div>
  664. <div class=\"counter-controls\">
  665. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"rooms\">−</button>
  666. <span class=\"counter-value\" id=\"cnt-rooms\">1</span>
  667. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"rooms\">+</button>
  668. </div>
  669. </div>
  671. <div class=\"counter-row\">
  672. <div class=\"counter-label\">
  673. <div class=\"counter-title\">Adults</div>
  674. </div>
  675. <div class=\"counter-controls\">
  676. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"adults\">−</button>
  677. <span class=\"counter-value\" id=\"cnt-adults\">2</span>
  678. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"adults\">+</button>
  679. </div>
  680. </div>
  682. <div class=\"counter-row\">
  683. <div class=\"counter-label\">
  684. <div class=\"counter-title\">Children</div>
  685. <div class=\"counter-sub\">1 - 17 years</div>
  686. </div>
  687. <div class=\"counter-controls\">
  688. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"children\">−</button>
  689. <span class=\"counter-value\" id=\"cnt-children\">0</span>
  690. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"children\">+</button>
  691. </div>
  692. </div>
  694. <div id=\"capacity-warning\" class=\"capacity-warning\" style=\"display:none;\"></div>
  696. ";
  697. // line 532
  698. yield " <div id=\"results\" class=\"mt-3\"></div>
  700. <hr class=\"booking-divider\">
  702. ";
  703. // line 537
  704. yield " <div class=\"row g-3\">
  705. <div class=\"col-md-6\">
  706. <label class=\"booking-label\">Last name</label>
  707. ";
  708. // line 540
  709. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 540, $this->source); })()), "lastname", [], "any", false, false, false, 540), 'widget');
  710. yield "
  711. </div>
  712. <div class=\"col-md-6\">
  713. <label class=\"booking-label\">First name</label>
  714. ";
  715. // line 544
  716. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 544, $this->source); })()), "name", [], "any", false, false, false, 544), 'widget');
  717. yield "
  718. </div>
  719. <div class=\"col-md-12\">
  720. <label class=\"booking-label\">Email address</label>
  721. ";
  722. // line 548
  723. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 548, $this->source); })()), "email", [], "any", false, false, false, 548), 'widget');
  724. yield "
  725. </div>
  726. <div class=\"col-md-12\">
  727. <label class=\"booking-label\">Message</label>
  728. ";
  729. // line 552
  730. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 552, $this->source); })()), "message", [], "any", false, false, false, 552), 'widget');
  731. yield "
  732. </div>
  733. </div>
  735. ";
  736. // line 557
  737. yield " <div class=\"text-center mt-4 cgv-block\">
  738. <input type=\"checkbox\" id=\"acceptCGV\" /> I accept the <a href=\"/terms\" target=\"_blank\" style=\"color:#212121; text-decoration:underline;\">terms and conditions of sale</a>
  739. </div>
  740. <div class=\"text-center mt-3\">
  741. <button type=\"submit\" name=\"submit\" value=\"1\" class=\"btn-main\" style=\"color:white;\">Send booking request</button>
  742. </div>
  744. ";
  745. // line 565
  746. yield " ";
  747. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 565, $this->source); })()), "start", [], "any", false, false, false, 565), 'widget');
  748. yield "
  749. ";
  750. // line 566
  751. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 566, $this->source); })()), "end", [], "any", false, false, false, 566), 'widget');
  752. yield "
  753. ";
  754. // line 567
  755. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 567, $this->source); })()), "rooms", [], "any", false, false, false, 567), 'widget');
  756. yield "
  757. ";
  758. // line 568
  759. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 568, $this->source); })()), "adults", [], "any", false, false, false, 568), 'widget');
  760. yield "
  761. ";
  762. // line 569
  763. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 569, $this->source); })()), "children", [], "any", false, false, false, 569), 'widget');
  764. yield "
  765. ";
  766. // line 570
  767. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock(CoreExtension::getAttribute($this->env, $this->source, (isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 570, $this->source); })()), "persons", [], "any", false, false, false, 570), 'widget');
  768. yield "
  770. ";
  771. // line 572
  772. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->searchAndRenderBlock((isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 572, $this->source); })()), 'rest');
  773. yield "
  774. ";
  775. // line 573
  776. yield $this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderBlock((isset($context["form"]) || array_key_exists("form", $context) ? $context["form"] : (function () { throw new RuntimeError('Variable "form" does not exist.', 573, $this->source); })()), 'form_end');
  777. yield "
  778. </div>
  779. </div>
  780. </div>
  781. </div>
  782. </section>
  784. <section id=\"faq\" class=\"text-light\">
  785. <div class=\"container\">
  787. <div class=\"row g-4 justify-content-center\">
  788. <div class=\"col-lg-6 text-center\">
  789. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">FAQ</h2>
  790. </div>
  791. </div>
  793. <div class=\"row g-4 justify-content-center\">
  794. <div class=\"col-lg-6 text-left\" style=\"color:black !important;\">
  796. <h3 style=\"margin-top:7px;\">How can I book the accommodation?</h3>
  797. <div>You can book directly on our website and soon via partner platforms. Secure payment immediately confirms your reservation.</div>
  799. <h3 style=\"margin-top:7px;\">What are the check-in and check-out times?</h3>
  800. <div>
  801. <ul>
  802. <li>Check-in: from 3:00 PM</li>
  803. <li>Check-out: before 11:00 AM</li>
  804. </ul>
  805. </div>
  807. <h3 style=\"margin-top:7px;\">Is the accommodation fully equipped?</h3>
  808. <div> Yes, the apartment is fully furnished and equipped: kitchen, bedding, towels, appliances, Wi-Fi, and more.</div>
  810. <h3 style=\"margin-top:7px;\">Is parking available?</h3>
  811. <div>Yes, private parking is available as an option at €24 per 24 hours or €150 per week (7 nights).</div>
  813. <h3 style=\"margin-top:7px;\">Is the accommodation suitable for children?</h3>
  814. <div>Yes, we offer some baby amenities (baby cot, high chair, child-friendly tableware) upon request.</div>
  816. <h3 style=\"margin-top:7px;\"> Are pets allowed?</h3>
  817. <div> Please contact us before booking if you wish to bring a pet. Only dogs are accepted, and prior approval is required.</div>
  819. <h3 style=\"margin-top:7px;\">Can I cancel or modify my reservation?</h3>
  820. <div>Yes, our cancellation policy is provided at the time of booking:
  821. <ul>
  822. <li>85% refund if canceled more than 1 month before arrival</li>
  823. <li>50% refund if canceled between 1 month and 15 days before arrival</li>
  824. <li>No refund if canceled less than 15 days before arrival</li>
  825. </ul>
  826. </div>
  828. <h3 style=\"margin-top:7px;\">Is the accommodation accessible by public transport?</h3>
  829. <div>Yes, major transport options are nearby. The tram station \"Langstross, Grand'rue\" is less than 100 meters from the apartment, and Strasbourg train station is a 10-minute walk.</div>
  831. <h3 style=\"margin-top:7px;\">Are there shops or restaurants nearby?</h3>
  832. <div>Yes, you'll find supermarkets, cafés, restaurants, and tourist activities right at the foot of the building.</div>
  834. <h3 style=\"margin-top:7px;\"> What should I do if there's a problem during my stay?</h3>
  835. <div> We are available 24/7 by email for emergencies or questions about the apartment. You can also call us from 9:00 AM to 8:00 PM at +33 7 61 05 82 43, and we are available on-site on the ground floor of the building from Tuesday to Saturday, 10:00 AM to 6:45 PM.
  836. </div>
  838. </div>
  839. </div>
  841. </div>
  842. </section>
  844. ";
  846. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  849. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  851. yield from [];
  852. }
  854. // line 642
  855. /**
  856. * @return iterable<null|scalar|\Stringable>
  857. */
  858. public function block_footerjs(array $context, array $blocks = []): iterable
  859. {
  860. $macros = $this->macros;
  861. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  862. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "footerjs"));
  864. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  865. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "footerjs"));
  867. // line 643
  868. yield " <script src=\"https://cdn.jsdelivr.net/npm/flatpickr\"></script>
  870. ";
  871. // line 646
  872. yield " <script>
  873. window.PRICING_MATRIX = ";
  874. // line 647
  875. yield json_encode((isset($context["pricingMatrix"]) || array_key_exists("pricingMatrix", $context) ? $context["pricingMatrix"] : (function () { throw new RuntimeError('Variable "pricingMatrix" does not exist.', 647, $this->source); })()));
  876. yield ";
  877. window.SIMULATION_URL = \"";
  878. // line 648
  879. yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("simulation_pricing");
  880. yield "\";
  881. console.log('📋 Off-peak pricing matrix loaded:', window.PRICING_MATRIX);
  882. console.log('🔗 Simulation URL:', window.SIMULATION_URL);
  883. </script>
  885. <script>
  886. // ===========================================================
  887. // Bedrooms / adults / children logic
  888. //
  889. // Physical layout:
  890. // - Bedroom A: double bed → 2 people
  891. // - Bedroom B: double bed → 2 people
  892. // - Bedroom C: bunk beds → 4 people (adults/children mix)
  893. //
  894. // The number of bedrooms is DETERMINED automatically (no choice):
  895. //
  896. // WITHOUT CHILDREN:
  897. // 1-2 ad → 1 br
  898. // 3-4 ad → 2 br
  899. // 5-8 ad → 3 br
  900. //
  901. // WITH CHILDREN:
  902. // 1-2 ad → 2 br (bedroom A + bunk room)
  903. // 3+ ad → 3 br (A + B + bunk room)
  904. //
  905. // Constraints: adults + children ≤ 8, children ≤ 4, adults ≥ 1
  906. // ===========================================================
  908. function roomsForCombo(adults, children) {
  909. if (children > 0) {
  910. return adults <= 2 ? 2 : 3;
  911. }
  912. if (adults <= 2) return 1;
  913. if (adults <= 4) return 2;
  914. return 3;
  915. }
  917. function canAddAdult(state) {
  918. if (state.adults >= 8) return false;
  919. return (state.adults + 1 + state.children) <= 8;
  920. }
  922. function canAddChild(state) {
  923. if (state.children >= 4) return false;
  924. return (state.adults + state.children + 1) <= 8;
  925. }
  927. const state = { rooms: 1, adults: 2, children: 0 };
  929. function updateDisplay() {
  930. // Bedrooms count is recalculated automatically on each update
  931. state.rooms = roomsForCombo(state.adults, state.children);
  933. \$('#cnt-rooms').text(state.rooms);
  934. \$('#cnt-adults').text(state.adults);
  935. \$('#cnt-children').text(state.children);
  937. \$('#reservation_form_rooms').val(state.rooms);
  938. \$('#reservation_form_adults').val(state.adults);
  939. \$('#reservation_form_children').val(state.children);
  940. \$('#reservation_form_persons').val(state.adults + state.children);
  942. \$('.counter-btn').each(function() {
  943. const target = \$(this).data('target');
  944. const action = \$(this).data('action');
  945. let disabled = false;
  947. if (target === 'rooms') {
  948. // Bedrooms = always locked (set by adults/children)
  949. disabled = true;
  950. }
  951. if (target === 'adults') {
  952. if (action === 'dec' && state.adults <= 1) disabled = true;
  953. if (action === 'inc' && !canAddAdult(state)) disabled = true;
  954. }
  955. if (target === 'children') {
  956. if (action === 'dec' && state.children <= 0) disabled = true;
  957. if (action === 'inc' && !canAddChild(state)) disabled = true;
  958. }
  960. \$(this).prop('disabled', disabled).toggleClass('disabled', disabled);
  961. });
  963. \$('#capacity-warning').hide();
  964. }
  966. \$(document).on('click', '.counter-btn', function() {
  967. if (\$(this).prop('disabled')) return;
  969. const target = \$(this).data('target');
  970. const action = \$(this).data('action');
  972. // No action on \"rooms\" (always disabled)
  974. if (target === 'adults') {
  975. if (action === 'inc' && canAddAdult(state)) state.adults++;
  976. if (action === 'dec' && state.adults > 1) state.adults--;
  977. }
  979. if (target === 'children') {
  980. if (action === 'inc' && canAddChild(state)) state.children++;
  981. if (action === 'dec' && state.children > 0) state.children--;
  982. }
  984. updateDisplay();
  985. updateSimulation();
  986. });
  988. function updateSimulation() {
  989. const start = \$(\"#reservation_form_start\").val();
  990. const end = \$(\"#reservation_form_end\").val();
  991. const persons = state.adults + state.children;
  993. console.log('🔄 updateSimulation', { start, end, rooms: state.rooms, adults: state.adults, children: state.children });
  995. if (!start || !end || persons < 1) {
  996. \$(\"#results\").html('');
  997. return;
  998. }
  1000. \$(\"#results\").html('<div class=\"loading\" style=\"color:#212121;\">Calculating...</div>');
  1002. \$.post(
  1003. window.SIMULATION_URL,
  1004. { start: start, end: end, rooms: state.rooms, adults: state.adults, children: state.children }
  1005. )
  1006. .done(function(data) {
  1007. console.log('✅ Simulation OK');
  1008. \$(\"#results\").html(data);
  1009. })
  1010. .fail(function(xhr) {
  1011. console.error('❌ Simulation KO', xhr.status, xhr.responseText);
  1012. \$(\"#results\").html('<div class=\"error\" style=\"color:#a00;\">Error calculating price (' + xhr.status + ')</div>');
  1013. });
  1014. }
  1016. \$(document).ready(function() {
  1017. updateDisplay();
  1019. \$('button[type=\"submit\"]').prop('disabled', true);
  1020. \$('#acceptCGV').change(function() {
  1021. \$('button[type=\"submit\"]').prop('disabled', !\$(this).is(':checked'));
  1022. });
  1023. });
  1024. </script>
  1026. <script>
  1027. // ===========================================================
  1028. // Flatpickr calendar
  1029. // ===========================================================
  1030. \$(document).ready(function() {
  1031. let bookedRanges = [];
  1033. \$.ajax({
  1034. url: '";
  1035. // line 802
  1036. yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['App\Twig\CoreExtension']->getEnvironmentVariable("WEBHOOK_CALENDAR_AVAILABILITY"), "html", null, true);
  1037. yield "',
  1038. method: 'POST',
  1039. contentType: 'application/json',
  1040. data: ''
  1041. })
  1042. .done(function(data) {
  1043. bookedRanges = data.bookings || [];
  1044. initDatePicker();
  1045. })
  1046. .fail(function() { initDatePicker(); });
  1048. function parseLocalDate(dateStr) {
  1049. const [year, month, day] = dateStr.split('-').map(Number);
  1050. return new Date(year, month - 1, day);
  1051. }
  1053. const isMobile = window.innerWidth <= 900;
  1055. function initDatePicker() {
  1056. flatpickr(\"#date_range_picker\", {
  1057. inline: true,
  1058. mode: \"range\",
  1059. minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
  1060. dateFormat: \"Y-m-d\",
  1061. showMonths: isMobile ? 1 : 2,
  1063. disable: [
  1064. function(date) {
  1065. const checkDate = new Date(date);
  1066. checkDate.setHours(0, 0, 0, 0);
  1067. return bookedRanges.some(range => {
  1068. const start = parseLocalDate(range.start_date);
  1069. const end = parseLocalDate(range.end_date);
  1070. return checkDate >= start && checkDate <= end;
  1071. });
  1072. }
  1073. ],
  1075. onChange: function(selectedDates, dateStr, instance) {
  1076. if (selectedDates.length === 2) {
  1077. const start = selectedDates[0];
  1078. const end = selectedDates[1];
  1080. if (isRangeAvailable(start, end)) {
  1081. \$('#reservation_form_start').val(formatDate(start)).trigger('change');
  1082. \$('#reservation_form_end').val(formatDate(end)).trigger('change');
  1083. updateSelectedInfo(start, end);
  1084. updateSimulation();
  1085. } else {
  1086. alert('⚠️ This period contains already booked dates.');
  1087. instance.clear();
  1088. clearSymfonyFields();
  1089. hideSelectedInfo();
  1090. \$(\"#results\").html('');
  1091. }
  1092. } else {
  1093. clearSymfonyFields();
  1094. hideSelectedInfo();
  1095. \$(\"#results\").html('');
  1096. }
  1097. },
  1099. onDayCreate: function(dObj, dStr, fp, dayElem) {
  1100. const date = new Date(dayElem.dateObj);
  1101. date.setHours(0, 0, 0, 0);
  1102. const isBooked = bookedRanges.some(range => {
  1103. const start = parseLocalDate(range.start_date);
  1104. const end = parseLocalDate(range.end_date);
  1105. return date >= start && date <= end;
  1106. });
  1107. if (isBooked) {
  1108. dayElem.classList.add('booked');
  1109. dayElem.title = 'Unavailable date (booked)';
  1110. } else if (date >= new Date()) {
  1111. dayElem.classList.add('available');
  1112. }
  1113. }
  1114. });
  1115. }
  1117. function isRangeAvailable(startDate, endDate) {
  1118. let currentDate = new Date(startDate);
  1119. currentDate.setHours(0, 0, 0, 0);
  1120. const endCheck = new Date(endDate);
  1121. endCheck.setHours(0, 0, 0, 0);
  1122. while (currentDate <= endCheck) {
  1123. const isBooked = bookedRanges.some(range => {
  1124. const start = parseLocalDate(range.start_date);
  1125. const end = parseLocalDate(range.end_date);
  1126. return currentDate >= start && currentDate <= end;
  1127. });
  1128. if (isBooked) return false;
  1129. currentDate.setDate(currentDate.getDate() + 1);
  1130. }
  1131. return true;
  1132. }
  1134. function updateSelectedInfo(start, end) {
  1135. const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
  1136. \$('#info-start').text(start.toLocaleDateString('en-GB'));
  1137. \$('#info-end').text(end.toLocaleDateString('en-GB'));
  1138. \$('#info-nights').text(nights + ' night' + (nights > 1 ? 's' : ''));
  1139. }
  1141. function hideSelectedInfo() {
  1142. \$('#info-start').text('-');
  1143. \$('#info-end').text('-');
  1144. \$('#info-nights').text('-');
  1145. }
  1147. function clearSymfonyFields() {
  1148. \$('#reservation_form_start').val('');
  1149. \$('#reservation_form_end').val('');
  1150. }
  1152. function formatDate(date) {
  1153. return date.getFullYear() + '-' +
  1154. String(date.getMonth() + 1).padStart(2, '0') + '-' +
  1155. String(date.getDate()).padStart(2, '0');
  1156. }
  1157. });
  1158. </script>
  1159. ";
  1161. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1164. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1166. yield from [];
  1167. }
  1169. // line 926
  1170. /**
  1171. * @return iterable<null|scalar|\Stringable>
  1172. */
  1173. public function block_css(array $context, array $blocks = []): iterable
  1174. {
  1175. $macros = $this->macros;
  1176. $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1177. $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));
  1179. $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1180. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));
  1182. // line 927
  1183. yield " <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css\">
  1184. <style>
  1185. /* ===========================================================
  1186. Booking card (white border, transparent bg, black text)
  1187. =========================================================== */
  1188. .booking-card {
  1189. background: transparent;
  1190. border: 2px solid white;
  1191. border-radius: 12px;
  1192. padding: 32px;
  1193. color: #212121;
  1194. }
  1195. .booking-title {
  1196. color: #212121;
  1197. font-weight: 700;
  1198. margin-bottom: 24px;
  1199. }
  1200. .booking-divider {
  1201. border-top: 1px solid rgba(0,0,0,0.15);
  1202. margin: 28px 0;
  1203. }
  1204. .booking-label {
  1205. color: #212121;
  1206. font-weight: 500;
  1207. margin-bottom: 6px;
  1208. display: block;
  1209. }
  1210. .booking-card input.form-control,
  1211. .booking-card textarea.form-control {
  1212. background: rgba(255,255,255,0.85) !important;
  1213. border: 1px solid rgba(0,0,0,0.2) !important;
  1214. color: #212121 !important;
  1215. }
  1216. .booking-card input.form-control::placeholder,
  1217. .booking-card textarea.form-control::placeholder {
  1218. color: rgba(0,0,0,0.4) !important;
  1219. }
  1220. .booking-card input.form-control:focus,
  1221. .booking-card textarea.form-control:focus {
  1222. border-color: #212121 !important;
  1223. box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08) !important;
  1224. }
  1226. .cgv-block { color: #212121; }
  1227. .cgv-block a { color: #212121; text-decoration: underline; }
  1229. .dates-recap { color: #212121; }
  1230. .recap-label {
  1231. font-size: 13px;
  1232. text-transform: uppercase;
  1233. letter-spacing: 0.5px;
  1234. opacity: 0.7;
  1235. }
  1236. .recap-value {
  1237. font-size: 18px;
  1238. font-weight: 600;
  1239. margin-top: 4px;
  1240. }
  1242. .counter-row {
  1243. display: flex;
  1244. justify-content: space-between;
  1245. align-items: center;
  1246. padding: 14px 0;
  1247. border-bottom: 1px solid rgba(0,0,0,0.1);
  1248. }
  1249. .counter-row:last-of-type { border-bottom: none; }
  1250. .counter-title { font-size: 16px; font-weight: 500; color: #212121; }
  1251. .counter-sub { font-size: 12px; color: rgba(0,0,0,0.6); margin-top: 2px; }
  1252. .counter-controls { display: flex; align-items: center; gap: 12px; }
  1253. .counter-btn {
  1254. width: 40px;
  1255. height: 40px;
  1256. border-radius: 8px;
  1257. border: 1.5px solid #212121;
  1258. background: transparent;
  1259. color: #212121;
  1260. font-size: 20px;
  1261. font-weight: 600;
  1262. line-height: 1;
  1263. cursor: pointer;
  1264. transition: all 0.15s;
  1265. }
  1266. .counter-btn:hover:not(.disabled) { background: rgba(0,0,0,0.06); }
  1267. .counter-btn.disabled,
  1268. .counter-btn:disabled {
  1269. border-color: rgba(0,0,0,0.2);
  1270. color: rgba(0,0,0,0.25);
  1271. cursor: not-allowed;
  1272. background: transparent;
  1273. }
  1274. .counter-value {
  1275. min-width: 28px;
  1276. text-align: center;
  1277. font-size: 16px;
  1278. font-weight: 500;
  1279. color: #212121;
  1280. }
  1281. .capacity-warning {
  1282. margin-top: 12px;
  1283. padding: 10px 14px;
  1284. background: rgba(255,180,0,0.18);
  1285. border: 1px solid rgba(180,120,0,0.5);
  1286. border-radius: 6px;
  1287. color: #8a4500;
  1288. font-size: 14px;
  1289. }
  1291. .calendar-container {
  1292. margin: 0 0 8px 0;
  1293. width: 100%;
  1294. display: flex;
  1295. justify-content: center;
  1296. }
  1297. #date_range_picker { display: none; }
  1298. .flatpickr-calendar.inline {
  1299. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  1300. border-radius: 8px;
  1301. }
  1302. .flatpickr-day.booked {
  1303. background-color: #ff4444 !important;
  1304. color: white !important;
  1305. cursor: not-allowed !important;
  1306. position: relative;
  1307. }
  1308. .flatpickr-day.booked::after {
  1309. content: \"✕\";
  1310. position: absolute;
  1311. top: 50%; left: 50%;
  1312. transform: translate(-50%, -50%);
  1313. font-size: 20px;
  1314. font-weight: bold;
  1315. }
  1316. .flatpickr-day.booked:hover { background-color: #ff0000 !important; }
  1317. .flatpickr-day.available:hover { background-color: #28a745; color: white; }
  1319. @media (max-width: 768px) {
  1320. .booking-card { padding: 20px; }
  1321. .calendar-container { margin: 0 0 8px 0; padding: 0; }
  1322. .flatpickr-calendar.inline { width: 100% !important; max-width: 100% !important; }
  1323. .flatpickr-months { padding: 8px 10px; }
  1324. .flatpickr-days { width: 100% !important; }
  1325. .dayContainer {
  1326. width: 100% !important;
  1327. min-width: 100% !important;
  1328. max-width: 100% !important;
  1329. }
  1330. .flatpickr-day {
  1331. height: 40px !important;
  1332. line-height: 40px !important;
  1333. flex-basis: 14.2857% !important;
  1334. max-width: 14.2857% !important;
  1335. }
  1336. }
  1337. </style>
  1338. ";
  1340. $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1343. $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1345. yield from [];
  1346. }
  1348. /**
  1349. * @codeCoverageIgnore
  1350. */
  1351. public function getTemplateName(): string
  1352. {
  1353. return "vitrine/en/homepage.html.twig";
  1354. }
  1356. /**
  1357. * @codeCoverageIgnore
  1358. */
  1359. public function isTraitable(): bool
  1360. {
  1361. return false;
  1362. }
  1364. /**
  1365. * @codeCoverageIgnore
  1366. */
  1367. public function getDebugInfo(): array
  1368. {
  1369. return array ( 1183 => 927, 1170 => 926, 1036 => 802, 879 => 648, 875 => 647, 872 => 646, 868 => 643, 855 => 642, 776 => 573, 772 => 572, 767 => 570, 763 => 569, 759 => 568, 755 => 567, 751 => 566, 746 => 565, 737 => 557, 730 => 552, 723 => 548, 716 => 544, 709 => 540, 704 => 537, 698 => 532, 657 => 492, 638 => 474, 632 => 469, 627 => 466, 614 => 455, 612 => 454, 610 => 453, 438 => 282, 179 => 15, 166 => 14, 151 => 8, 138 => 7, 115 => 5, 92 => 4, 69 => 3, 46 => 1,);
  1370. }
  1372. public function getSourceContext(): Source
  1373. {
  1374. return new Source("{% extends 'vitrine/en/layout.html.twig' %}
  1376. {% block title %}Cathedral Heritage Suite - 8-Guest Rental Strasbourg Center{% endblock title %}
  1377. {% block description %}Rent our 83m² suite in the heart of Strasbourg. 3 bedrooms, sleeps 8, 100m from Cathedral. Kitchen fully furnished, 2 bathrooms. Book your stay today!{% endblock description %}
  1378. {% block robots %}index,follow{% endblock robots %}
  1380. {% block canonical %}
  1381. <link rel=\"canonical\" href=\"https://cathedraleheritage.com\" />
  1382. <link rel=\"alternate\" hreflang=\"fr\" href=\"https://cathedraleheritage.com/fr\" />
  1383. <link rel=\"alternate\" hreflang=\"en\" href=\"https://cathedraleheritage.com\" />
  1384. <link rel=\"alternate\" hreflang=\"x-default\" href=\"https://cathedraleheritage.com\" />
  1385. {% endblock canonical %}
  1387. {% block body %}
  1389. <section id=\"hero\" class=\"text-light no-top no-bottom relative overflow-hidden z-1000\">
  1390. <div class=\"abs w-100 abs-centered z-2\">
  1391. <div class=\"container\">
  1392. <div class=\"spacer-double\"></div>
  1393. <div class=\"row g-4 align-items-center justify-content-center\">
  1394. <div class=\"col-md-8 text-center\">
  1395. <h1 class=\"mb-2\" style=\"color:white;\">Welcome to Cathedral Heritage Suite</h1>
  1396. <p class=\"lead mb-3\" style=\"color:white; font-size:22px;\">Beautifully appointed apartment accommodating up to 8 guests in Strasbourg's prestigious historical city center</p>
  1397. <a class=\"btn-main btn-line bg-blur fx-slide\" href=\"#about\" style=\"color:white;\"><span>Find out more</span></a>
  1398. </div>
  1399. </div>
  1400. </div>
  1401. </div>
  1402. <div class=\"vertical-center\">
  1403. <div class=\"swiper\">
  1404. <div class=\"swiper-wrapper\">
  1405. <div class=\"swiper-slide\">
  1406. <div class=\"swiper-inner\" data-bgimage=\"url(/images/salon2.jpeg)\">
  1407. <div class=\"sw-overlay op-5\"></div>
  1408. </div>
  1409. </div>
  1410. <div class=\"swiper-slide\">
  1411. <div class=\"swiper-inner\" data-bgimage=\"url(/images/chambre2.jpeg)\">
  1412. <div class=\"sw-overlay op-5\"></div>
  1413. </div>
  1414. </div>
  1415. <div class=\"swiper-slide\">
  1416. <div class=\"swiper-inner\" data-bgimage=\"url(/images/noel.jpeg)\">
  1417. <div class=\"sw-overlay op-5\"></div>
  1418. </div>
  1419. </div>
  1420. </div>
  1421. </div>
  1422. </div>
  1424. <div class=\"abs w-100 bottom-0 z-2 pb-4 sm-hide\">
  1425. <div class=\"container\">
  1426. <div class=\"row\">
  1427. <div class=\"col-lg-12\">
  1428. <div class=\"d-flex justify-content-between\">
  1429. <div><h6 style=\"color:white;\">Cathedral 100m away</h6></div>
  1430. <div><h6 style=\"color:white;\">Museums 200m away</h6></div>
  1431. <div><h6 style=\"color:white;\">Petite France 300m away</h6></div>
  1432. </div>
  1433. </div>
  1434. </div>
  1435. </div>
  1436. </div>
  1437. <div class=\"gradient-edge-bottom op-8\"></div>
  1438. </section>
  1440. <section id=\"about\">
  1441. <div class=\"container\">
  1442. <div class=\"row g-4 align-items-end justify-content-between\">
  1443. <div class=\"col-lg-5\">
  1444. <div class=\"subtitle\">About the apartment</div>
  1445. <h2>Modern suite in the heart of Strasbourg's Grande Île</h2>
  1446. </div>
  1448. <div class=\"col-lg-4\">
  1449. <p class=\"mb-4\" style=\"color:#212121;\">
  1450. Spacious fully equipped appartement ideal for families and groups up to 8 people : 1 master bedroom with en-suite bathroom, one double bedroom, one bedroom with two double bunk beds (sleeps 4), maximum weight of 100kg for upper bunks.
  1451. </p>
  1452. <p class=\"mb-4\" style=\"color:#212121;\">
  1453. Kitchen fully furnished and cozy living-dining room to share great moments together.
  1454. </p>
  1455. <p class=\"mb-4\" style=\"color:#212121;\">
  1456. Amenities: hairdryer, dishwasher, washer-dryer, microwave, oven, ironing board with iron, Nespresso coffee machine, kettle, TV, Wi-Fi and USB outlets for charging your devices.
  1457. </p>
  1458. </div>
  1459. </div>
  1461. <div class=\"spacer-single\"></div>
  1463. <div class=\"row g-4\">
  1464. <div class=\"col-md-2\">
  1465. <div class=\"relative\">
  1466. <h5>Size</h5>
  1467. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:6px;\">
  1468. <img src=\"/images/home.png\" width=\"37\" class=\"me-3\" alt=\"\">
  1469. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">83 m²</div>
  1470. </div>
  1471. </div>
  1472. </div>
  1474. <div class=\"col-md-2\">
  1475. <div class=\"relative\">
  1476. <h5>Bedrooms</h5>
  1477. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:4px;\">
  1478. <img src=\"/images/bed.png\" width=\"37\" class=\"me-3\" alt=\"\">
  1479. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">3</div>
  1480. </div>
  1481. </div>
  1482. </div>
  1484. <div class=\"col-md-2\">
  1485. <div class=\"relative\">
  1486. <h5>Living Room</h5>
  1487. <div class=\"d-flex justify-content-start align-items-center\">
  1488. <img src=\"/images/sofa.png\" width=\"50\" class=\"me-3\" alt=\"\">
  1489. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">Included</div>
  1490. </div>
  1491. </div>
  1492. </div>
  1494. <div class=\"col-md-2\">
  1495. <div class=\"relative\">
  1496. <h5>Kitchen</h5>
  1497. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:6px;\">
  1498. <img src=\"/images/cooking.png\" width=\"37\" class=\"me-3\" alt=\"\">
  1499. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">Included</div>
  1500. </div>
  1501. </div>
  1502. </div>
  1504. <div class=\"col-md-2\">
  1505. <div class=\"relative\">
  1506. <h5>Bathrooms</h5>
  1507. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:4px;\">
  1508. <img src=\"/images/bathroom.png\" width=\"40\" class=\"me-3\" alt=\"\">
  1509. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">2</div>
  1510. </div>
  1511. </div>
  1512. </div>
  1514. <div class=\"col-md-2\">
  1515. <div class=\"relative\">
  1516. <h5>Guests</h5>
  1517. <div class=\"d-flex justify-content-start align-items-center\" style=\"padding-top:5px;\">
  1518. <img src=\"/images/user.png\" width=\"37\" class=\"me-3\" alt=\"\">
  1519. <div class=\"fs-20 fw-600\" style=\"color:#212121;\">8</div>
  1520. </div>
  1521. </div>
  1522. </div>
  1523. </div>
  1524. </div>
  1525. </section>
  1527. <section id=\"rooms\" class=\"p-0 overflow-hidden\">
  1529. <div class=\"container-fluid\">
  1530. <div class=\"row\">
  1531. <div class=\"col-lg-12\">
  1532. <div class=\"owl-custom-nav menu-float\" data-target=\"#room-carousel\">
  1533. <a class=\"btn-next\"></a>
  1534. <a class=\"btn-prev\"></a>
  1536. <div id=\"room-carousel\" class=\"owl-2-cols-center owl-carousel owl-theme\">
  1538. <div class=\"item\">
  1539. <div class=\"relative\">
  1540. <div class=\"overflow-hidden text-light\">
  1541. <div class=\"abs h-100 start-0 z-2 p-4\">
  1542. <h3 style=\"color:white;\">Living Room</h3>
  1543. </div>
  1544. <img src=\"/images/salon2.jpeg\" class=\"w-100\" alt=\"Living Room\">
  1545. </div>
  1546. </div>
  1547. </div>
  1549. <div class=\"item\">
  1550. <div class=\"relative\">
  1551. <div class=\"overflow-hidden text-light\">
  1552. <div class=\"abs h-100 start-1 z-2 p-4\">
  1553. <h3 style=\"color:white;\">Bedroom 1</h3>
  1554. </div>
  1555. <img src=\"/images/chambre1.jpeg\" class=\"w-100\" alt=\"Bedroom 1\">
  1556. </div>
  1557. </div>
  1558. </div>
  1560. <div class=\"item\">
  1561. <div class=\"relative\">
  1562. <div class=\"overflow-hidden text-light\">
  1563. <div class=\"abs h-100 start-2 z-2 p-4\">
  1564. <h3 style=\"color:white;\">Bedroom 2</h3>
  1565. </div>
  1566. <img src=\"/images/chambre2.jpeg\" class=\"w-100\" alt=\"Bedroom 2\">
  1567. </div>
  1568. </div>
  1569. </div>
  1571. <div class=\"item\">
  1572. <div class=\"relative\">
  1573. <div class=\"overflow-hidden text-light\">
  1574. <div class=\"abs h-100 start-3 z-2 p-4\">
  1575. <h3 style=\"color:white;\">Bedroom 3</h3>
  1576. </div>
  1577. <img src=\"/images/chambre3.jpeg\" class=\"w-100\" alt=\"Bedroom 3\">
  1578. </div>
  1579. </div>
  1580. </div>
  1582. <div class=\"item\">
  1583. <div class=\"relative\">
  1584. <div class=\"overflow-hidden text-light\">
  1585. <div class=\"abs h-100 start-4 z-2 p-4\">
  1586. <h3 style=\"color:white;\">Kitchen</h3>
  1587. </div>
  1588. <img src=\"/images/cuisine.jpeg\" class=\"w-100\" alt=\"Kitchen\">
  1589. </div>
  1590. </div>
  1591. </div>
  1593. <div class=\"item\">
  1594. <div class=\"relative\">
  1595. <div class=\"overflow-hidden text-light\">
  1596. <div class=\"abs h-100 start-5 z-2 p-4\">
  1597. <h3 style=\"color:white;\">Bathroom</h3>
  1598. </div>
  1599. <img src=\"/images/salledebain.jpeg\" class=\"w-100\" alt=\"Bathroom 1\">
  1600. </div>
  1601. </div>
  1602. </div>
  1604. <div class=\"item\">
  1605. <div class=\"relative\">
  1606. <div class=\"overflow-hidden text-light\">
  1607. <div class=\"abs h-100 start-6 z-2 p-4\">
  1608. <h3 style=\"color:white;\">Bathroom 2</h3>
  1609. </div>
  1610. <img src=\"/images/salledebain2.jpeg\" class=\"w-100\" alt=\"Bathroom 2\">
  1611. </div>
  1612. </div>
  1613. </div>
  1615. </div>
  1616. </div>
  1617. </div>
  1618. </div>
  1619. </div>
  1621. </section>
  1623. <section id=\"services\" class=\"overlay-dark-1\">
  1624. <div class=\"container\">
  1625. <div class=\"row g-4 justify-content-between\">
  1626. <div class=\"col-lg-5 relative z-3\">
  1627. <div class=\"me-lg-3\">
  1628. <div class=\"subtitle wow fadeInUp\" data-wow-delay=\".0s\">Your stay in Strasbourg</div>
  1629. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Rates and services</h2>
  1630. <p style=\"color:#212121; font-size:18px;\">An exceptional suite in the heart of Strasbourg, with optionnal dedicated concierge service to assist you throughout your stay.</p>
  1632. <p style=\"color:#212121; font-size:18px;\">Minimum booking of two nights.</p>
  1634. <a href=\"#reservation\" class=\"btn-main\" style=\"color:white;\">Booking</a>
  1637. </div>
  1638. </div>
  1640. <div class=\"col-lg-6\" style=\"color:black;\">
  1641. <div class=\"spacer-single spacer-double\"></div>
  1642. <div class=\"row\">
  1643. <div class=\"col-md-6 wow fadeInUp\" data-wow-delay=\".2s\">
  1645. {#
  1646. <h5 class=\" mb-3\">Peak Season</h5>
  1647. <p class=\"fs-500\"><small>June 1st to September 30th • November 25th to January 5th</small></p>
  1648. <ul class=\"ul-check fs-500\">
  1649. <li>€960 per night</li>
  1650. <li>10% discount for bookings of 7 nights and up</li>
  1651. </ul>
  1653. <h5 class=\"mb-3 mt-4\">Off-peak Season</h5>
  1654. #}
  1656. <ul class=\"ul-check fs-500\">
  1657. <li>from €350 per night</li>
  1658. <li>10% discount for bookings of 7 nights and up</li>
  1659. </ul>
  1660. </div>
  1662. <div class=\"col-md-6 wow fadeInUp\" data-wow-delay=\".4s\">
  1663. <h5 class=\"mb-3\">Optional services</h5>
  1664. <ul class=\"ul-check fs-500\">
  1665. <li>One parking space: €24/day or €150/week</li>
  1666. <li>Extra cleaning during your stay : 60 euros</li>
  1667. <li>Other Extras : Children's workshop, baby amenities, dog policy on request (other pets are unfortunately not allowed in the appartement), Decoration for special occasions, breakfast, Alsatian delicacies, etc</li>
  1668. </ul>
  1670. <div class=\"mt-4\">
  1671. <p class=\"fs-500\">
  1672. <strong>On site assistance</strong> <br />
  1673. <small>Tuesday to Saturday • 10am-6:45pm</small>
  1674. </p>
  1675. <p class=\"fs-500\">
  1676. <strong>Private concierge subject to availability</strong><br>
  1677. <small>Quotation on request</small>
  1678. </p>
  1679. </div>
  1680. </div>
  1681. </div>
  1682. </div>
  1683. </div>
  1686. </div>
  1687. </section>
  1689. <section id=\"section-gallery\" class=\"relative\">
  1690. <div class=\"container relative z-2\" id=\"photos\">
  1691. <div class=\"row g-4 gx-5 justify-content-center\">
  1692. <div class=\"col-lg-6 text-center\">
  1693. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Apartment Gallery</h2>
  1694. <p class=\"wow fadeInUp\" data-wow-delay=\".3s\" style=\"color:#212121;\">Explore our curated images to discover the residence's various spaces — from the bedrooms and living area to the kitchen, bathroom, and outdoor surroundings.</p>
  1695. </div>
  1696. </div>
  1698. <div class=\"row\">
  1699. <div class=\"col-md-12 text-center\">
  1700. <ul id=\"filters\" class=\"wow fadeInUp\" data-wow-delay=\"0s\">
  1701. <li><a href=\"#\" data-filter=\"*\" class=\"selected\" style=\"color:#212121;\">Show All</a></li>
  1702. <li><a href=\"#\" data-filter=\".chambre\" style=\"color:#212121;\">Bedrooms</a></li>
  1703. <li><a href=\"#\" data-filter=\".salon\" style=\"color:#212121;\">Living Room</a></li>
  1704. <li><a href=\"#\" data-filter=\".cuisine\" style=\"color:#212121;\">Kitchen</a></li>
  1705. <li><a href=\"#\" data-filter=\".salledebain\" style=\"color:#212121;\">Bathroom</a></li>
  1706. <li><a href=\"#\" data-filter=\".exterieur\" style=\"color:#212121;\">Outdoor surroundings</a></li>
  1707. </ul>
  1708. </div>
  1709. </div>
  1711. <div id=\"gallery\" class=\"row g-3 wow fadeInUp\" data-wow-delay=\".3s\">
  1712. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  1713. <a href=\"images/chambre1.jpeg\" class=\"image-popup d-block hover\">
  1714. <div class=\"relative overflow-hidden\">
  1715. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1716. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1717. <img src=\"images/chambre1.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom\">
  1718. </div>
  1719. </a>
  1720. </div>
  1721. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  1722. <a href=\"images/chambre2.jpeg\" class=\"image-popup d-block hover\">
  1723. <div class=\"relative overflow-hidden\">
  1724. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1725. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1726. <img src=\"images/chambre2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom 2\">
  1727. </div>
  1728. </a>
  1729. </div>
  1730. <div class=\"col-md-3 col-sm-6 col-12 item chambre\">
  1731. <a href=\"images/chambre3.jpeg\" class=\"image-popup d-block hover\">
  1732. <div class=\"relative overflow-hidden\">
  1733. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1734. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1735. <img src=\"images/chambre3.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bedroom 3\">
  1736. </div>
  1737. </a>
  1738. </div>
  1739. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  1740. <a href=\"images/salon.jpeg\" class=\"image-popup d-block hover\">
  1741. <div class=\"relative overflow-hidden\">
  1742. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1743. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1744. <img src=\"images/salon.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room\">
  1745. </div>
  1746. </a>
  1747. </div>
  1748. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  1749. <a href=\"images/salon2.jpeg\" class=\"image-popup d-block hover\">
  1750. <div class=\"relative overflow-hidden\">
  1751. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1752. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1753. <img src=\"images/salon2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 2\">
  1754. </div>
  1755. </a>
  1756. </div>
  1757. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  1758. <a href=\"images/salon3.jpeg\" class=\"image-popup d-block hover\">
  1759. <div class=\"relative overflow-hidden\">
  1760. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1761. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1762. <img src=\"images/salon3.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 3\">
  1763. </div>
  1764. </a>
  1765. </div>
  1766. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  1767. <a href=\"images/salon4.jpeg\" class=\"image-popup d-block hover\">
  1768. <div class=\"relative overflow-hidden\">
  1769. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1770. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1771. <img src=\"images/salon4.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 4\">
  1772. </div>
  1773. </a>
  1774. </div>
  1775. <div class=\"col-md-3 col-sm-6 col-12 item salon\">
  1776. <a href=\"images/salon5.jpeg\" class=\"image-popup d-block hover\">
  1777. <div class=\"relative overflow-hidden\">
  1778. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1779. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1780. <img src=\"images/salon5.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Living Room 5\">
  1781. </div>
  1782. </a>
  1783. </div>
  1784. <div class=\"col-md-3 col-sm-6 col-12 item cuisine\">
  1785. <a href=\"images/cuisine.jpeg\" class=\"image-popup d-block hover\">
  1786. <div class=\"relative overflow-hidden\">
  1787. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1788. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1789. <img src=\"images/cuisine.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Kitchen\">
  1790. </div>
  1791. </a>
  1792. </div>
  1793. <div class=\"col-md-3 col-sm-6 col-12 item salledebain\">
  1794. <a href=\"images/salledebain.jpeg\" class=\"image-popup d-block hover\">
  1795. <div class=\"relative overflow-hidden\">
  1796. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1797. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1798. <img src=\"images/salledebain.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bathroom\">
  1799. </div>
  1800. </a>
  1801. </div>
  1802. <div class=\"col-md-3 col-sm-6 col-12 item salledebain\">
  1803. <a href=\"images/salledebain2.jpeg\" class=\"image-popup d-block hover\">
  1804. <div class=\"relative overflow-hidden\">
  1805. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1806. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1807. <img src=\"images/salledebain2.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Bathroom 2\">
  1808. </div>
  1809. </a>
  1810. </div>
  1811. <div class=\"col-md-3 col-sm-6 col-12 item exterieur\">
  1812. <a href=\"images/exterieur.jpeg\" class=\"image-popup d-block hover\">
  1813. <div class=\"relative overflow-hidden\">
  1814. <div class=\"absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3\">View</div>
  1815. <div class=\"absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2\"></div>
  1816. <img src=\"images/exterieur.jpeg\" class=\"w-100 hover-scale-1-2\" alt=\"Exterior\">
  1817. </div>
  1818. </a>
  1819. </div>
  1820. </div>
  1822. </div>
  1823. </section>
  1825. {# =================================================== #}
  1826. {# ============ BOOKING SECTION (refactored) ========= #}
  1827. {# =================================================== #}
  1828. <section id=\"reservation\" class=\"text-light\">
  1829. <div class=\"container\">
  1830. <div class=\"row g-4 justify-content-center\">
  1831. <div class=\"col-lg-6 text-center\">
  1832. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">Book your stay</h2>
  1833. </div>
  1834. </div>
  1836. <div class=\"row g-4 justify-content-center\">
  1837. <div class=\"col-lg-8\">
  1838. <div class=\"booking-card\">
  1839. {{ form_start(form) }}
  1841. {# ----- CALENDAR ----- #}
  1842. <div class=\"calendar-container\" style=\"height:300px;\">
  1843. <input type=\"text\" id=\"date_range_picker\">
  1844. </div>
  1846. {# ----- DATES RECAP (just below the calendar) ----- #}
  1847. <div class=\"row g-3 mt-2 dates-recap\">
  1848. <div class=\"col-4 text-center\">
  1849. <div class=\"recap-label\">Arrival</div>
  1850. <div class=\"recap-value\" id=\"info-start\">-</div>
  1851. </div>
  1852. <div class=\"col-4 text-center\">
  1853. <div class=\"recap-label\">Departure</div>
  1854. <div class=\"recap-value\" id=\"info-end\">-</div>
  1855. </div>
  1856. <div class=\"col-4 text-center\">
  1857. <div class=\"recap-label\">Nights</div>
  1858. <div class=\"recap-value\" id=\"info-nights\">-</div>
  1859. </div>
  1860. </div>
  1862. <hr class=\"booking-divider\">
  1864. {# ----- COUNTERS ----- #}
  1865. <h4 class=\"booking-title\">Select rooms and guests</h4>
  1867. <div class=\"counter-row\">
  1868. <div class=\"counter-label\">
  1869. <div class=\"counter-title\">Bedrooms</div>
  1870. <div class=\"counter-sub\">Set by guest count</div>
  1871. </div>
  1872. <div class=\"counter-controls\">
  1873. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"rooms\">−</button>
  1874. <span class=\"counter-value\" id=\"cnt-rooms\">1</span>
  1875. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"rooms\">+</button>
  1876. </div>
  1877. </div>
  1879. <div class=\"counter-row\">
  1880. <div class=\"counter-label\">
  1881. <div class=\"counter-title\">Adults</div>
  1882. </div>
  1883. <div class=\"counter-controls\">
  1884. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"adults\">−</button>
  1885. <span class=\"counter-value\" id=\"cnt-adults\">2</span>
  1886. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"adults\">+</button>
  1887. </div>
  1888. </div>
  1890. <div class=\"counter-row\">
  1891. <div class=\"counter-label\">
  1892. <div class=\"counter-title\">Children</div>
  1893. <div class=\"counter-sub\">1 - 17 years</div>
  1894. </div>
  1895. <div class=\"counter-controls\">
  1896. <button type=\"button\" class=\"counter-btn\" data-action=\"dec\" data-target=\"children\">−</button>
  1897. <span class=\"counter-value\" id=\"cnt-children\">0</span>
  1898. <button type=\"button\" class=\"counter-btn\" data-action=\"inc\" data-target=\"children\">+</button>
  1899. </div>
  1900. </div>
  1902. <div id=\"capacity-warning\" class=\"capacity-warning\" style=\"display:none;\"></div>
  1904. {# ----- PRICE RESULT ----- #}
  1905. <div id=\"results\" class=\"mt-3\"></div>
  1907. <hr class=\"booking-divider\">
  1909. {# ----- PERSONAL INFO ----- #}
  1910. <div class=\"row g-3\">
  1911. <div class=\"col-md-6\">
  1912. <label class=\"booking-label\">Last name</label>
  1913. {{ form_widget(form.lastname) }}
  1914. </div>
  1915. <div class=\"col-md-6\">
  1916. <label class=\"booking-label\">First name</label>
  1917. {{ form_widget(form.name) }}
  1918. </div>
  1919. <div class=\"col-md-12\">
  1920. <label class=\"booking-label\">Email address</label>
  1921. {{ form_widget(form.email) }}
  1922. </div>
  1923. <div class=\"col-md-12\">
  1924. <label class=\"booking-label\">Message</label>
  1925. {{ form_widget(form.message) }}
  1926. </div>
  1927. </div>
  1929. {# ----- T&C + SUBMIT ----- #}
  1930. <div class=\"text-center mt-4 cgv-block\">
  1931. <input type=\"checkbox\" id=\"acceptCGV\" /> I accept the <a href=\"/terms\" target=\"_blank\" style=\"color:#212121; text-decoration:underline;\">terms and conditions of sale</a>
  1932. </div>
  1933. <div class=\"text-center mt-3\">
  1934. <button type=\"submit\" name=\"submit\" value=\"1\" class=\"btn-main\" style=\"color:white;\">Send booking request</button>
  1935. </div>
  1937. {# Hidden fields #}
  1938. {{ form_widget(form.start) }}
  1939. {{ form_widget(form.end) }}
  1940. {{ form_widget(form.rooms) }}
  1941. {{ form_widget(form.adults) }}
  1942. {{ form_widget(form.children) }}
  1943. {{ form_widget(form.persons) }}
  1945. {{ form_rest(form) }}
  1946. {{ form_end(form) }}
  1947. </div>
  1948. </div>
  1949. </div>
  1950. </div>
  1951. </section>
  1953. <section id=\"faq\" class=\"text-light\">
  1954. <div class=\"container\">
  1956. <div class=\"row g-4 justify-content-center\">
  1957. <div class=\"col-lg-6 text-center\">
  1958. <h2 class=\"wow fadeInUp\" data-wow-delay=\".2s\">FAQ</h2>
  1959. </div>
  1960. </div>
  1962. <div class=\"row g-4 justify-content-center\">
  1963. <div class=\"col-lg-6 text-left\" style=\"color:black !important;\">
  1965. <h3 style=\"margin-top:7px;\">How can I book the accommodation?</h3>
  1966. <div>You can book directly on our website and soon via partner platforms. Secure payment immediately confirms your reservation.</div>
  1968. <h3 style=\"margin-top:7px;\">What are the check-in and check-out times?</h3>
  1969. <div>
  1970. <ul>
  1971. <li>Check-in: from 3:00 PM</li>
  1972. <li>Check-out: before 11:00 AM</li>
  1973. </ul>
  1974. </div>
  1976. <h3 style=\"margin-top:7px;\">Is the accommodation fully equipped?</h3>
  1977. <div> Yes, the apartment is fully furnished and equipped: kitchen, bedding, towels, appliances, Wi-Fi, and more.</div>
  1979. <h3 style=\"margin-top:7px;\">Is parking available?</h3>
  1980. <div>Yes, private parking is available as an option at €24 per 24 hours or €150 per week (7 nights).</div>
  1982. <h3 style=\"margin-top:7px;\">Is the accommodation suitable for children?</h3>
  1983. <div>Yes, we offer some baby amenities (baby cot, high chair, child-friendly tableware) upon request.</div>
  1985. <h3 style=\"margin-top:7px;\"> Are pets allowed?</h3>
  1986. <div> Please contact us before booking if you wish to bring a pet. Only dogs are accepted, and prior approval is required.</div>
  1988. <h3 style=\"margin-top:7px;\">Can I cancel or modify my reservation?</h3>
  1989. <div>Yes, our cancellation policy is provided at the time of booking:
  1990. <ul>
  1991. <li>85% refund if canceled more than 1 month before arrival</li>
  1992. <li>50% refund if canceled between 1 month and 15 days before arrival</li>
  1993. <li>No refund if canceled less than 15 days before arrival</li>
  1994. </ul>
  1995. </div>
  1997. <h3 style=\"margin-top:7px;\">Is the accommodation accessible by public transport?</h3>
  1998. <div>Yes, major transport options are nearby. The tram station \"Langstross, Grand'rue\" is less than 100 meters from the apartment, and Strasbourg train station is a 10-minute walk.</div>
  2000. <h3 style=\"margin-top:7px;\">Are there shops or restaurants nearby?</h3>
  2001. <div>Yes, you'll find supermarkets, cafés, restaurants, and tourist activities right at the foot of the building.</div>
  2003. <h3 style=\"margin-top:7px;\"> What should I do if there's a problem during my stay?</h3>
  2004. <div> We are available 24/7 by email for emergencies or questions about the apartment. You can also call us from 9:00 AM to 8:00 PM at +33 7 61 05 82 43, and we are available on-site on the ground floor of the building from Tuesday to Saturday, 10:00 AM to 6:45 PM.
  2005. </div>
  2007. </div>
  2008. </div>
  2010. </div>
  2011. </section>
  2013. {% endblock body %}
  2015. {% block footerjs %}
  2016. <script src=\"https://cdn.jsdelivr.net/npm/flatpickr\"></script>
  2018. {# Pricing matrix + simulation URL exposed to JS #}
  2019. <script>
  2020. window.PRICING_MATRIX = {{ pricingMatrix|json_encode|raw }};
  2021. window.SIMULATION_URL = \"{{ path('simulation_pricing') }}\";
  2022. console.log('📋 Off-peak pricing matrix loaded:', window.PRICING_MATRIX);
  2023. console.log('🔗 Simulation URL:', window.SIMULATION_URL);
  2024. </script>
  2026. <script>
  2027. // ===========================================================
  2028. // Bedrooms / adults / children logic
  2029. //
  2030. // Physical layout:
  2031. // - Bedroom A: double bed → 2 people
  2032. // - Bedroom B: double bed → 2 people
  2033. // - Bedroom C: bunk beds → 4 people (adults/children mix)
  2034. //
  2035. // The number of bedrooms is DETERMINED automatically (no choice):
  2036. //
  2037. // WITHOUT CHILDREN:
  2038. // 1-2 ad → 1 br
  2039. // 3-4 ad → 2 br
  2040. // 5-8 ad → 3 br
  2041. //
  2042. // WITH CHILDREN:
  2043. // 1-2 ad → 2 br (bedroom A + bunk room)
  2044. // 3+ ad → 3 br (A + B + bunk room)
  2045. //
  2046. // Constraints: adults + children ≤ 8, children ≤ 4, adults ≥ 1
  2047. // ===========================================================
  2049. function roomsForCombo(adults, children) {
  2050. if (children > 0) {
  2051. return adults <= 2 ? 2 : 3;
  2052. }
  2053. if (adults <= 2) return 1;
  2054. if (adults <= 4) return 2;
  2055. return 3;
  2056. }
  2058. function canAddAdult(state) {
  2059. if (state.adults >= 8) return false;
  2060. return (state.adults + 1 + state.children) <= 8;
  2061. }
  2063. function canAddChild(state) {
  2064. if (state.children >= 4) return false;
  2065. return (state.adults + state.children + 1) <= 8;
  2066. }
  2068. const state = { rooms: 1, adults: 2, children: 0 };
  2070. function updateDisplay() {
  2071. // Bedrooms count is recalculated automatically on each update
  2072. state.rooms = roomsForCombo(state.adults, state.children);
  2074. \$('#cnt-rooms').text(state.rooms);
  2075. \$('#cnt-adults').text(state.adults);
  2076. \$('#cnt-children').text(state.children);
  2078. \$('#reservation_form_rooms').val(state.rooms);
  2079. \$('#reservation_form_adults').val(state.adults);
  2080. \$('#reservation_form_children').val(state.children);
  2081. \$('#reservation_form_persons').val(state.adults + state.children);
  2083. \$('.counter-btn').each(function() {
  2084. const target = \$(this).data('target');
  2085. const action = \$(this).data('action');
  2086. let disabled = false;
  2088. if (target === 'rooms') {
  2089. // Bedrooms = always locked (set by adults/children)
  2090. disabled = true;
  2091. }
  2092. if (target === 'adults') {
  2093. if (action === 'dec' && state.adults <= 1) disabled = true;
  2094. if (action === 'inc' && !canAddAdult(state)) disabled = true;
  2095. }
  2096. if (target === 'children') {
  2097. if (action === 'dec' && state.children <= 0) disabled = true;
  2098. if (action === 'inc' && !canAddChild(state)) disabled = true;
  2099. }
  2101. \$(this).prop('disabled', disabled).toggleClass('disabled', disabled);
  2102. });
  2104. \$('#capacity-warning').hide();
  2105. }
  2107. \$(document).on('click', '.counter-btn', function() {
  2108. if (\$(this).prop('disabled')) return;
  2110. const target = \$(this).data('target');
  2111. const action = \$(this).data('action');
  2113. // No action on \"rooms\" (always disabled)
  2115. if (target === 'adults') {
  2116. if (action === 'inc' && canAddAdult(state)) state.adults++;
  2117. if (action === 'dec' && state.adults > 1) state.adults--;
  2118. }
  2120. if (target === 'children') {
  2121. if (action === 'inc' && canAddChild(state)) state.children++;
  2122. if (action === 'dec' && state.children > 0) state.children--;
  2123. }
  2125. updateDisplay();
  2126. updateSimulation();
  2127. });
  2129. function updateSimulation() {
  2130. const start = \$(\"#reservation_form_start\").val();
  2131. const end = \$(\"#reservation_form_end\").val();
  2132. const persons = state.adults + state.children;
  2134. console.log('🔄 updateSimulation', { start, end, rooms: state.rooms, adults: state.adults, children: state.children });
  2136. if (!start || !end || persons < 1) {
  2137. \$(\"#results\").html('');
  2138. return;
  2139. }
  2141. \$(\"#results\").html('<div class=\"loading\" style=\"color:#212121;\">Calculating...</div>');
  2143. \$.post(
  2144. window.SIMULATION_URL,
  2145. { start: start, end: end, rooms: state.rooms, adults: state.adults, children: state.children }
  2146. )
  2147. .done(function(data) {
  2148. console.log('✅ Simulation OK');
  2149. \$(\"#results\").html(data);
  2150. })
  2151. .fail(function(xhr) {
  2152. console.error('❌ Simulation KO', xhr.status, xhr.responseText);
  2153. \$(\"#results\").html('<div class=\"error\" style=\"color:#a00;\">Error calculating price (' + xhr.status + ')</div>');
  2154. });
  2155. }
  2157. \$(document).ready(function() {
  2158. updateDisplay();
  2160. \$('button[type=\"submit\"]').prop('disabled', true);
  2161. \$('#acceptCGV').change(function() {
  2162. \$('button[type=\"submit\"]').prop('disabled', !\$(this).is(':checked'));
  2163. });
  2164. });
  2165. </script>
  2167. <script>
  2168. // ===========================================================
  2169. // Flatpickr calendar
  2170. // ===========================================================
  2171. \$(document).ready(function() {
  2172. let bookedRanges = [];
  2174. \$.ajax({
  2175. url: '{{ env('WEBHOOK_CALENDAR_AVAILABILITY') }}',
  2176. method: 'POST',
  2177. contentType: 'application/json',
  2178. data: ''
  2179. })
  2180. .done(function(data) {
  2181. bookedRanges = data.bookings || [];
  2182. initDatePicker();
  2183. })
  2184. .fail(function() { initDatePicker(); });
  2186. function parseLocalDate(dateStr) {
  2187. const [year, month, day] = dateStr.split('-').map(Number);
  2188. return new Date(year, month - 1, day);
  2189. }
  2191. const isMobile = window.innerWidth <= 900;
  2193. function initDatePicker() {
  2194. flatpickr(\"#date_range_picker\", {
  2195. inline: true,
  2196. mode: \"range\",
  2197. minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
  2198. dateFormat: \"Y-m-d\",
  2199. showMonths: isMobile ? 1 : 2,
  2201. disable: [
  2202. function(date) {
  2203. const checkDate = new Date(date);
  2204. checkDate.setHours(0, 0, 0, 0);
  2205. return bookedRanges.some(range => {
  2206. const start = parseLocalDate(range.start_date);
  2207. const end = parseLocalDate(range.end_date);
  2208. return checkDate >= start && checkDate <= end;
  2209. });
  2210. }
  2211. ],
  2213. onChange: function(selectedDates, dateStr, instance) {
  2214. if (selectedDates.length === 2) {
  2215. const start = selectedDates[0];
  2216. const end = selectedDates[1];
  2218. if (isRangeAvailable(start, end)) {
  2219. \$('#reservation_form_start').val(formatDate(start)).trigger('change');
  2220. \$('#reservation_form_end').val(formatDate(end)).trigger('change');
  2221. updateSelectedInfo(start, end);
  2222. updateSimulation();
  2223. } else {
  2224. alert('⚠️ This period contains already booked dates.');
  2225. instance.clear();
  2226. clearSymfonyFields();
  2227. hideSelectedInfo();
  2228. \$(\"#results\").html('');
  2229. }
  2230. } else {
  2231. clearSymfonyFields();
  2232. hideSelectedInfo();
  2233. \$(\"#results\").html('');
  2234. }
  2235. },
  2237. onDayCreate: function(dObj, dStr, fp, dayElem) {
  2238. const date = new Date(dayElem.dateObj);
  2239. date.setHours(0, 0, 0, 0);
  2240. const isBooked = bookedRanges.some(range => {
  2241. const start = parseLocalDate(range.start_date);
  2242. const end = parseLocalDate(range.end_date);
  2243. return date >= start && date <= end;
  2244. });
  2245. if (isBooked) {
  2246. dayElem.classList.add('booked');
  2247. dayElem.title = 'Unavailable date (booked)';
  2248. } else if (date >= new Date()) {
  2249. dayElem.classList.add('available');
  2250. }
  2251. }
  2252. });
  2253. }
  2255. function isRangeAvailable(startDate, endDate) {
  2256. let currentDate = new Date(startDate);
  2257. currentDate.setHours(0, 0, 0, 0);
  2258. const endCheck = new Date(endDate);
  2259. endCheck.setHours(0, 0, 0, 0);
  2260. while (currentDate <= endCheck) {
  2261. const isBooked = bookedRanges.some(range => {
  2262. const start = parseLocalDate(range.start_date);
  2263. const end = parseLocalDate(range.end_date);
  2264. return currentDate >= start && currentDate <= end;
  2265. });
  2266. if (isBooked) return false;
  2267. currentDate.setDate(currentDate.getDate() + 1);
  2268. }
  2269. return true;
  2270. }
  2272. function updateSelectedInfo(start, end) {
  2273. const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
  2274. \$('#info-start').text(start.toLocaleDateString('en-GB'));
  2275. \$('#info-end').text(end.toLocaleDateString('en-GB'));
  2276. \$('#info-nights').text(nights + ' night' + (nights > 1 ? 's' : ''));
  2277. }
  2279. function hideSelectedInfo() {
  2280. \$('#info-start').text('-');
  2281. \$('#info-end').text('-');
  2282. \$('#info-nights').text('-');
  2283. }
  2285. function clearSymfonyFields() {
  2286. \$('#reservation_form_start').val('');
  2287. \$('#reservation_form_end').val('');
  2288. }
  2290. function formatDate(date) {
  2291. return date.getFullYear() + '-' +
  2292. String(date.getMonth() + 1).padStart(2, '0') + '-' +
  2293. String(date.getDate()).padStart(2, '0');
  2294. }
  2295. });
  2296. </script>
  2297. {% endblock footerjs %}
  2299. {% block css %}
  2300. <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css\">
  2301. <style>
  2302. /* ===========================================================
  2303. Booking card (white border, transparent bg, black text)
  2304. =========================================================== */
  2305. .booking-card {
  2306. background: transparent;
  2307. border: 2px solid white;
  2308. border-radius: 12px;
  2309. padding: 32px;
  2310. color: #212121;
  2311. }
  2312. .booking-title {
  2313. color: #212121;
  2314. font-weight: 700;
  2315. margin-bottom: 24px;
  2316. }
  2317. .booking-divider {
  2318. border-top: 1px solid rgba(0,0,0,0.15);
  2319. margin: 28px 0;
  2320. }
  2321. .booking-label {
  2322. color: #212121;
  2323. font-weight: 500;
  2324. margin-bottom: 6px;
  2325. display: block;
  2326. }
  2327. .booking-card input.form-control,
  2328. .booking-card textarea.form-control {
  2329. background: rgba(255,255,255,0.85) !important;
  2330. border: 1px solid rgba(0,0,0,0.2) !important;
  2331. color: #212121 !important;
  2332. }
  2333. .booking-card input.form-control::placeholder,
  2334. .booking-card textarea.form-control::placeholder {
  2335. color: rgba(0,0,0,0.4) !important;
  2336. }
  2337. .booking-card input.form-control:focus,
  2338. .booking-card textarea.form-control:focus {
  2339. border-color: #212121 !important;
  2340. box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08) !important;
  2341. }
  2343. .cgv-block { color: #212121; }
  2344. .cgv-block a { color: #212121; text-decoration: underline; }
  2346. .dates-recap { color: #212121; }
  2347. .recap-label {
  2348. font-size: 13px;
  2349. text-transform: uppercase;
  2350. letter-spacing: 0.5px;
  2351. opacity: 0.7;
  2352. }
  2353. .recap-value {
  2354. font-size: 18px;
  2355. font-weight: 600;
  2356. margin-top: 4px;
  2357. }
  2359. .counter-row {
  2360. display: flex;
  2361. justify-content: space-between;
  2362. align-items: center;
  2363. padding: 14px 0;
  2364. border-bottom: 1px solid rgba(0,0,0,0.1);
  2365. }
  2366. .counter-row:last-of-type { border-bottom: none; }
  2367. .counter-title { font-size: 16px; font-weight: 500; color: #212121; }
  2368. .counter-sub { font-size: 12px; color: rgba(0,0,0,0.6); margin-top: 2px; }
  2369. .counter-controls { display: flex; align-items: center; gap: 12px; }
  2370. .counter-btn {
  2371. width: 40px;
  2372. height: 40px;
  2373. border-radius: 8px;
  2374. border: 1.5px solid #212121;
  2375. background: transparent;
  2376. color: #212121;
  2377. font-size: 20px;
  2378. font-weight: 600;
  2379. line-height: 1;
  2380. cursor: pointer;
  2381. transition: all 0.15s;
  2382. }
  2383. .counter-btn:hover:not(.disabled) { background: rgba(0,0,0,0.06); }
  2384. .counter-btn.disabled,
  2385. .counter-btn:disabled {
  2386. border-color: rgba(0,0,0,0.2);
  2387. color: rgba(0,0,0,0.25);
  2388. cursor: not-allowed;
  2389. background: transparent;
  2390. }
  2391. .counter-value {
  2392. min-width: 28px;
  2393. text-align: center;
  2394. font-size: 16px;
  2395. font-weight: 500;
  2396. color: #212121;
  2397. }
  2398. .capacity-warning {
  2399. margin-top: 12px;
  2400. padding: 10px 14px;
  2401. background: rgba(255,180,0,0.18);
  2402. border: 1px solid rgba(180,120,0,0.5);
  2403. border-radius: 6px;
  2404. color: #8a4500;
  2405. font-size: 14px;
  2406. }
  2408. .calendar-container {
  2409. margin: 0 0 8px 0;
  2410. width: 100%;
  2411. display: flex;
  2412. justify-content: center;
  2413. }
  2414. #date_range_picker { display: none; }
  2415. .flatpickr-calendar.inline {
  2416. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  2417. border-radius: 8px;
  2418. }
  2419. .flatpickr-day.booked {
  2420. background-color: #ff4444 !important;
  2421. color: white !important;
  2422. cursor: not-allowed !important;
  2423. position: relative;
  2424. }
  2425. .flatpickr-day.booked::after {
  2426. content: \"✕\";
  2427. position: absolute;
  2428. top: 50%; left: 50%;
  2429. transform: translate(-50%, -50%);
  2430. font-size: 20px;
  2431. font-weight: bold;
  2432. }
  2433. .flatpickr-day.booked:hover { background-color: #ff0000 !important; }
  2434. .flatpickr-day.available:hover { background-color: #28a745; color: white; }
  2436. @media (max-width: 768px) {
  2437. .booking-card { padding: 20px; }
  2438. .calendar-container { margin: 0 0 8px 0; padding: 0; }
  2439. .flatpickr-calendar.inline { width: 100% !important; max-width: 100% !important; }
  2440. .flatpickr-months { padding: 8px 10px; }
  2441. .flatpickr-days { width: 100% !important; }
  2442. .dayContainer {
  2443. width: 100% !important;
  2444. min-width: 100% !important;
  2445. max-width: 100% !important;
  2446. }
  2447. .flatpickr-day {
  2448. height: 40px !important;
  2449. line-height: 40px !important;
  2450. flex-basis: 14.2857% !important;
  2451. max-width: 14.2857% !important;
  2452. }
  2453. }
  2454. </style>
  2455. {% endblock css %}
  2456. ", "vitrine/en/homepage.html.twig", "/var/www/vhosts/mirtillostudio.com/ch.mirtillostudio.com/templates/vitrine/en/homepage.html.twig");
  2457. }
  2458. }