templates/Components/Destination/Detail/Tabs/priceTable.html.twig line 1

  1. {% if(showStyle is defined) %}
  2.     <style>
  3.         .table {
  4.             width: 100%;
  5.             border-collapse: collapse;
  6.             font-size: 0.7rem; /* Zmenšení velikosti textu */
  7.         }
  9.         .table-smaller td,
  10.         .table-smaller th {
  11.             padding: 4px; /* Menší padding uvnitř buněk */
  12.             text-align: center;
  13.             vertical-align: middle;
  14.             border: 1px solid #ccc;
  15.         }
  17.         thead tr {
  18.             background-color: #f2f2f2;
  19.         }
  21.         thead td {
  22.             font-weight: bold;
  23.             padding: 6px; /* Menší padding v záhlaví */
  24.             text-align: center;
  25.             border: 1px solid #ddd;
  26.         }
  28.         .field-title {
  29.             font-weight: bold;
  30.             text-align: left;
  31.             padding-left: 6px; /* Menší zarovnání */
  32.             white-space: nowrap; /* Zabránění zalomení textu */
  33.         }
  35.         .bg-reserved {
  36.             background-color: #eccb0b;
  37.             color: white;
  38.             font-weight: bold;
  39.             text-align: center;
  40.         }
  42.         .bg-full {
  43.             background-color: #d2494c;
  44.             color: white;
  45.             font-weight: bold;
  46.             text-align: center;
  47.         }
  49.         .bg-only-bus {
  50.             background-color: #4fbe1b;
  51.             color: white;
  52.             font-weight: bold;
  53.             text-align: center;
  54.         }
  56.         .bg-only-car {
  57.             background-color: #6FA5D2;
  58.             color: white;
  59.             font-weight: bold;
  60.             text-align: center;
  61.         }
  63.         tbody tr:nth-child(even) {
  64.             background-color: #f9f9f9;
  65.         }
  67.         tbody tr:hover {
  68.             background-color: #f1f1f1;
  69.         }
  71.         td {
  72.             padding: 4px; /* Menší padding */
  73.             border: 1px solid #ddd;
  74.             font-size: 0.7rem; /* Zmenšení textu pro obsah buněk */
  75.         }
  77.         td.bg-reserved {
  78.             background-color: #eccb0b;
  79.             color: #fff;
  80.             font-weight: bold;
  81.         }
  83.         td.bg-full {
  84.             background-color: #d2494c;
  85.             color: #fff;
  86.             font-weight: bold;
  87.         }
  89.         td.bg-only-bus {
  90.             background-color: #4fbe1b;
  91.             color: #fff;
  92.             font-weight: bold;
  93.         }
  95.         td.bg-only-car {
  96.             background-color: #6FA5D2;
  97.             color: #fff;
  98.             font-weight: bold;
  99.         }
  101.         .bg-price-text {
  102.             background-color: #9b59b6;
  103.             color: #fff;
  104.             font-weight: bold;
  105.             text-align: center;
  106.         }
  108.         td.bg-price-text {
  109.             background-color: #9b59b6;
  110.             color: #fff;
  111.             font-weight: bold;
  112.         }
  114.         td.pdf-bg-only-bus {
  115.             background-color: #4fbe1b;
  116.             color: #fff;
  117.             font-weight: bold;
  118.         }
  120.         td.pdf-bg-only-car {
  121.             background-color: #6FA5D2;
  122.             color: #fff;
  123.             font-weight: bold;
  124.         }
  126.         /* Přidání automatického zmenšení tabulky */
  127.         .table {
  128.             table-layout: fixed; /* Nastavení pevného layoutu tabulky */
  129.         }
  131.         td {
  132.             word-wrap: break-word; /* Rozdělení dlouhých slov */
  133.         }
  135.     </style>
  136. {% endif %}
  138. {% if(destination.generatePriceTable) %}
  139.     <table class="table table-smaller">
  140.         <thead>
  141.         <tr>
  142.             <td></td>
  143.             <td><strong>Termín</strong></td>
  144.             <td><strong>Počet dní pob./záj.</strong></td>
  145.             <td><strong>Den odjezdu</strong></td>
  146.             {% for accommodation in destination.accommodations %}
  147.                 <td><strong>{{ accommodation.name }}</strong></td>
  148.             {% endfor %}
  149.         </tr>
  150.         </thead>
  151.         <tbody>
  152.         {% for term in destination.activeTerms %}
  153.             <tr class="{% if(term.onlyBus) %}bus pdf-bg-only-bus{% endif %}{% if(term.onlyCar) %}car pdf-bg-only-car{% endif %}">
  154.                 <td class="field-title{% if(term.onlyBus) %} pdf-bg-only-bus{% endif %}{% if(term.onlyCar) %} pdf-bg-only-car{% endif %}">{{ term.number }}</td>
  155.                 <td>{{ term.start|date('d.m.') }} - {{ term.end|date('d.m.') }}</td>
  156.                 <td>{{ term.numberOfDays }}</td>
  157.                 <td>{{ term.departureDay }}</td>
  158.                 {% for accommodation in destination.accommodations %}
  159.                     {% set termPrice = term.getAccommodationTermPrice(accommodation) %}
  160.                     {% set price = termPrice ? termPrice.price : null %}
  161.                     {% set bgClass = term.getAccommodationBgClass(accommodation) %}
  162.                     <td class="{{ bgClass }}">
  163.                         {% if termPrice and termPrice.priceText is not empty %}
  164.                             {{ termPrice.priceText }}
  165.                         {% elseif(price) %}
  166.                             {{ price|format_currency('CZK') }}
  167.                             {% if bgClass in ['bg-full', 'bg-reserved'] and termPrice %}
  168.                                 <br>
  169.                                 <button class="btn btn-sm btn-warning watchdog-btn" 
  170.                                         data-term-price-id="{{ termPrice.id }}"
  171.                                         data-destination="{{ destination.name }}"
  172.                                         data-term="{{ term.start|date('d.m.') }} - {{ term.end|date('d.m.') }}"
  173.                                         data-accommodation="{{ accommodation.name }}"
  174.                                         data-price="{{ price }}"
  175.                                         style="font-size: 0.65rem; padding: 2px 6px; margin-top: 2px;">
  176.                                     🔔 Hlídat
  177.                                 </button>
  178.                             {% endif %}
  179.                         {% else %}
  180.                             -
  181.                         {% endif %}
  182.                     </td>
  183.                 {% endfor %}
  184.             </tr>
  185.         {% endfor %}
  186.         </tbody>
  188.     </table>
  190.     <span class="bg-reserved">Rezervováno</span>
  191.     <span class="bg-full">Prodáno</span>
  192.     <span class="bg-only-car">Pouze vlastní doprava</span>
  193.     <span class="bg-only-bus">Pouze autobusová doprava</span>
  194.     <span class="bg-price-text">Text místo ceny</span>
  196.     <!-- Modal pro watchdog -->
  197.     <div class="modal fade" id="watchdogModal" tabindex="-1" role="dialog" aria-labelledby="watchdogModalLabel">
  198.         <div class="modal-dialog" role="document">
  199.             <div class="modal-content">
  200.                 <div class="modal-header">
  201.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  202.                         <span aria-hidden="true">&times;</span>
  203.                     </button>
  204.                     <h4 class="modal-title" id="watchdogModalLabel">🔔 Hlídat dostupnost</h4>
  205.                 </div>
  206.                 <div class="modal-body">
  207.                     <div id="watchdog-info" style="margin-bottom: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
  208.                         <strong>Destinace:</strong> <span id="modal-destination"></span><br>
  209.                         <strong>Termín:</strong> <span id="modal-term"></span><br>
  210.                         <strong>Ubytování:</strong> <span id="modal-accommodation"></span><br>
  211.                         <strong>Cena:</strong> <span id="modal-price"></span>
  212.                     </div>
  213.                     <div class="form-group">
  214.                         <label for="watchdog-email">Váš e-mail:</label>
  215.                         <input type="email" class="form-control" id="watchdog-email" placeholder="vas@email.cz" required>
  216.                         <small class="form-text text-muted">
  217.                             Pošleme vám e-mail, jakmile bude termín dostupný k objednání.
  218.                         </small>
  219.                     </div>
  220.                     
  221.                     <div class="form-group">
  222.                         <div class="checkbox">
  223.                             <label>
  224.                                 <input type="checkbox" id="watchdog-gdpr-consent" required>
  225.                                 Souhlasím se zpracováním mého e-mailu za účelem zasílání upozornění na dostupnost vybraného termínu.
  226.                             </label>
  227.                         </div>
  228.                         <small class="form-text text-muted" style="margin-top: 5px;">
  229.                             <a href="#gdpr-details" data-toggle="collapse" aria-expanded="false" aria-controls="gdpr-details" style="color: #337ab7;">
  230.                                 Informace o zpracování osobních údajů
  231.                             </a>
  232.                         </small>
  233.                         <div class="collapse" id="gdpr-details" style="margin-top: 10px;">
  234.                             <div class="well well-sm" style="margin-bottom: 0; font-size: 12px;">
  235.                                 <strong>Informace o zpracování osobních údajů:</strong><br>
  236.                                 Správcem vašich osobních údajů je Iveria Travel. Váš e-mail bude použit výhradně pro zaslání upozornění 
  237.                                 na dostupnost vybraného termínu. Po odeslání upozornění nebo na základě vašeho odvolání souhlasu 
  238.                                 budou údaje vymazány. Máte právo na přístup k údajům, jejich opravu, výmaz a přenositelnost.
  239.                                 <br><br>
  240.                                 Svůj souhlas mohu kdykoli odvolat kliknutím na odkaz v zaslaném e-mailu.
  241.                             </div>
  242.                         </div>
  243.                     </div>
  244.                     
  245.                     <div id="watchdog-message" style="display: none; margin-top: 10px;"></div>
  246.                 </div>
  247.                 <div class="modal-footer">
  248.                     <button type="button" class="btn btn-default" data-dismiss="modal">Zrušit</button>
  249.                     <button type="button" class="btn btn-primary" id="watchdog-submit">Hlídat dostupnost</button>
  250.                 </div>
  251.             </div>
  252.         </div>
  253.     </div>
  255.     <script>
  256.     (function() {
  257.         let currentTermPriceId = null;
  259.         // Otevření modalu při kliknutí na tlačítko
  260.         document.addEventListener('click', function(e) {
  261.             if (e.target && e.target.classList.contains('watchdog-btn')) {
  262.                 currentTermPriceId = e.target.getAttribute('data-term-price-id');
  263.                 document.getElementById('modal-destination').textContent = e.target.getAttribute('data-destination');
  264.                 document.getElementById('modal-term').textContent = e.target.getAttribute('data-term');
  265.                 document.getElementById('modal-accommodation').textContent = e.target.getAttribute('data-accommodation');
  266.                 
  267.                 // Formátování ceny
  268.                 const price = e.target.getAttribute('data-price');
  269.                 if (price) {
  270.                     const formattedPrice = new Intl.NumberFormat('cs-CZ', {
  271.                         style: 'currency',
  272.                         currency: 'CZK'
  273.                     }).format(price);
  274.                     document.getElementById('modal-price').textContent = formattedPrice;
  275.                 } else {
  276.                     document.getElementById('modal-price').textContent = '-';
  277.                 }
  278.                 
  279.                 document.getElementById('watchdog-email').value = '';
  280.                 document.getElementById('watchdog-gdpr-consent').checked = false;
  281.                 document.getElementById('watchdog-message').style.display = 'none';
  282.                 
  283.                 // Zavřít GDPR details collapse
  284.                 if (typeof jQuery !== 'undefined') {
  285.                     jQuery('#gdpr-details').collapse('hide');
  286.                 }
  287.                 
  288.                 // Otevřít modal (Bootstrap 3)
  289.                 if (typeof jQuery !== 'undefined') {
  290.                     jQuery('#watchdogModal').modal('show');
  291.                 }
  292.             }
  293.         });
  295.         // Odeslání formuláře
  296.         document.getElementById('watchdog-submit').addEventListener('click', function() {
  297.             const email = document.getElementById('watchdog-email').value.trim();
  298.             const gdprConsent = document.getElementById('watchdog-gdpr-consent').checked;
  299.             const messageDiv = document.getElementById('watchdog-message');
  300.             
  301.             if (!email) {
  302.                 showMessage('Prosím, vyplňte e-mailovou adresu.', 'danger');
  303.                 return;
  304.             }
  306.             if (!validateEmail(email)) {
  307.                 showMessage('Prosím, zadejte platnou e-mailovou adresu.', 'danger');
  308.                 return;
  309.             }
  311.             if (!gdprConsent) {
  312.                 showMessage('Prosím, potvrďte souhlas se zpracováním osobních údajů.', 'danger');
  313.                 return;
  314.             }
  316.             // Disable tlačítko během odesílání
  317.             const submitBtn = document.getElementById('watchdog-submit');
  318.             submitBtn.disabled = true;
  319.             submitBtn.textContent = 'Odesílám...';
  321.             // AJAX požadavek
  322.             fetch('/term-price-watchdog', {
  323.                 method: 'POST',
  324.                 headers: {
  325.                     'Content-Type': 'application/json',
  326.                 },
  327.                 body: JSON.stringify({
  328.                     termPriceId: currentTermPriceId,
  329.                     email: email,
  330.                     gdprConsent: gdprConsent
  331.                 })
  332.             })
  333.             .then(response => response.json())
  334.             .then(data => {
  335.                 if (data.ok) {
  336.                     showMessage(data.message || 'Hlídání bylo úspěšně nastaveno!', 'success');
  337.                     setTimeout(function() {
  338.                         if (typeof jQuery !== 'undefined') {
  339.                             jQuery('#watchdogModal').modal('hide');
  340.                         }
  341.                     }, 2000);
  342.                 } else {
  343.                     showMessage(data.message || 'Došlo k chybě. Zkuste to prosím znovu.', 'danger');
  344.                 }
  345.             })
  346.             .catch(error => {
  347.                 console.error('Error:', error);
  348.                 showMessage('Došlo k chybě při komunikaci se serverem.', 'danger');
  349.             })
  350.             .finally(() => {
  351.                 submitBtn.disabled = false;
  352.                 submitBtn.textContent = 'Hlídat dostupnost';
  353.             });
  354.         });
  356.         function showMessage(message, type) {
  357.             const messageDiv = document.getElementById('watchdog-message');
  358.             messageDiv.className = 'alert alert-' + type;
  359.             messageDiv.textContent = message;
  360.             messageDiv.style.display = 'block';
  361.         }
  363.         function validateEmail(email) {
  364.             const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  365.             return re.test(email);
  366.         }
  367.     })();
  368.     </script>
  369. {% endif %}
  370. {{ destination.priceTable | raw }}