templates/web/chatbot-page.html.twig line 1

Open in your IDE?
  1. {% extends 'web/base.html.twig' %}
  2. {% block title %}Pitaj Slađanu – 2sweet.eu{% endblock %}
  4. {% block body %}
  6.     {{ include('web/components/inner/breadcrumb.html.twig') }}
  8.     <div class="bgWhite">
  9.         <div class="container">
  10.             <div class="emptySpace-xs40 emptySpace80"></div>
  12.             <div class="row">
  13.                 <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3" style="text-align:center;">
  14.                     <img src="{{ asset('img/sweet.png') }}" alt="Slađana" style="height:60px; margin-bottom:20px;">
  15.                     <h2 class="h2">Pitaj Slađanu</h2>
  16.                     <div class="emptySpace15"></div>
  17.                     <p class="normall" style="color:#888;">
  18.                         Slađana je naša slatka asistentica — pitaj je sve o tortama, kolačima, cijenama i dostavi.
  19.                         Za osobni upit, pošalji nam poruku direktno iz chata.
  20.                     </p>
  21.                 </div>
  22.             </div>
  24.             <div class="emptySpace-xs30 emptySpace50"></div>
  26.             <div class="row">
  27.                 <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
  28.                     <div id="sladana-embed" style="
  29.                         background: #fff9f6;
  30.                         border: 1px solid #ead7d2;
  31.                         border-radius: 16px;
  32.                         box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  33.                         overflow: hidden;
  34.                         display: flex;
  35.                         flex-direction: column;
  36.                         height: 560px;
  37.                     ">
  38.                         <div class="sibi-header" style="flex-shrink:0;">
  39.                             <span>Slađana – slatka asistentica</span>
  40.                         </div>
  41.                         <div class="sibi-messages" id="page-sibi-messages" aria-live="polite" style="flex:1; overflow-y:auto;"></div>
  42.                         <div class="sibi-quick" id="page-sibi-quick"></div>
  43.                         <form class="sibi-form" id="page-sibi-form">
  44.                             <input class="sibi-input" id="page-sibi-input" type="text" placeholder="Upiši poruku..." autocomplete="off" />
  45.                             <button class="sibi-send" type="submit">Pošalji</button>
  46.                         </form>
  47.                     </div>
  48.                 </div>
  49.             </div>
  51.             <div class="emptySpace-xs40 emptySpace80"></div>
  52.         </div>
  53.     </div>
  55.     <div class="footerSeparator"></div>
  56.     <div class="emptySpace-xs30 emptySpace50"></div>
  58. {% endblock %}
  60. {% block javascripts %}
  61.     {{ parent() }}
  62.     <script>
  63.     // Inicijalizacija chata na zasebnoj stranici
  64.     (function () {
  65.         var sessionToken = null;
  66.         var isWaiting = false;
  67.         var inquiryFormVisible = false;
  69.         var messagesEl = document.getElementById('page-sibi-messages');
  70.         var quickEl    = document.getElementById('page-sibi-quick');
  71.         var form       = document.getElementById('page-sibi-form');
  72.         var input      = document.getElementById('page-sibi-input');
  74.         if (!messagesEl) return;
  76.         function addMessage(text, who) {
  77.             var msg = document.createElement('div');
  78.             msg.className = 'sibi-message ' + who;
  79.             var bubble = document.createElement('div');
  80.             bubble.className = 'sibi-bubble';
  81.             bubble.textContent = text;
  82.             msg.appendChild(bubble);
  83.             messagesEl.appendChild(msg);
  84.             messagesEl.scrollTop = messagesEl.scrollHeight;
  85.         }
  87.         function showTyping() {
  88.             var el = document.createElement('div');
  89.             el.className = 'sibi-message bot sibi-typing';
  90.             el.id = 'page-typing';
  91.             el.innerHTML = '<div class="sibi-bubble"><span class="sibi-dot"></span><span class="sibi-dot"></span><span class="sibi-dot"></span></div>';
  92.             messagesEl.appendChild(el);
  93.             messagesEl.scrollTop = messagesEl.scrollHeight;
  94.         }
  96.         function hideTyping() {
  97.             var el = document.getElementById('page-typing');
  98.             if (el) el.parentNode.removeChild(el);
  99.         }
  101.         function ensureSession(cb) {
  102.             if (sessionToken) { cb(sessionToken); return; }
  103.             fetch('/chatbot/session', { method: 'POST', headers: { 'Content-Type': 'application/json' } })
  104.                 .then(function (r) { return r.json(); })
  105.                 .then(function (d) { sessionToken = d.session_token; cb(sessionToken); });
  106.         }
  108.         function setQuickReplies(items) {
  109.             quickEl.innerHTML = '';
  110.             items.forEach(function (item) {
  111.                 if (item.href) {
  112.                     var a = document.createElement('a');
  113.                     a.href = item.href; a.textContent = item.label; a.rel = 'noopener';
  114.                     quickEl.appendChild(a);
  115.                 } else if (item.label === 'Pošalji upit') {
  116.                     var btn = document.createElement('button');
  117.                     btn.type = 'button'; btn.textContent = item.label;
  118.                     btn.addEventListener('click', function () { openInquiryForm(); });
  119.                     quickEl.appendChild(btn);
  120.                 } else {
  121.                     var btn2 = document.createElement('button');
  122.                     btn2.type = 'button'; btn2.textContent = item.label;
  123.                     btn2.addEventListener('click', function () { sendMessage(item.payload || item.label); });
  124.                     quickEl.appendChild(btn2);
  125.                 }
  126.             });
  127.         }
  129.         function sendMessage(text) {
  130.             if (!text || isWaiting || inquiryFormVisible) return;
  131.             var raw = text.trim();
  132.             if (!raw) return;
  133.             addMessage(raw, 'user');
  134.             quickEl.innerHTML = '';
  135.             isWaiting = true;
  136.             input.disabled = true;
  137.             showTyping();
  139.             ensureSession(function (token) {
  140.                 fetch('/chatbot/message', {
  141.                     method: 'POST',
  142.                     headers: { 'Content-Type': 'application/json' },
  143.                     body: JSON.stringify({ message: raw, session_token: token })
  144.                 })
  145.                 .then(function (r) { return r.json(); })
  146.                 .then(function (d) {
  147.                     hideTyping();
  148.                     isWaiting = false;
  149.                     input.disabled = false;
  150.                     input.focus();
  151.                     if (d.session_token) sessionToken = d.session_token;
  152.                     if (d.response) addMessage(d.response, 'bot');
  153.                     setQuickReplies([
  154.                         { label: 'Pošalji upit' },
  155.                         { label: 'Kalkulator', href: '/svadbeni-kalkulator' }
  156.                     ]);
  157.                 })
  158.                 .catch(function () {
  159.                     hideTyping(); isWaiting = false; input.disabled = false;
  160.                     addMessage('Ups, problem s vezom. Probaj ponovo! 😅', 'bot');
  161.                 });
  162.             });
  163.         }
  165.         function openInquiryForm() {
  166.             if (inquiryFormVisible) return;
  167.             inquiryFormVisible = true;
  168.             var wrapper = document.createElement('div');
  169.             wrapper.className = 'sibi-inquiry-form';
  170.             wrapper.innerHTML = [
  171.                 '<p class="sibi-inquiry-title">Pošalji upit majstorima 🍰</p>',
  172.                 '<input type="text" class="sibi-inq-input" id="pinq-name" placeholder="Ime i prezime *" />',
  173.                 '<input type="tel" class="sibi-inq-input" id="pinq-phone" placeholder="Broj mobitela *" />',
  174.                 '<input type="email" class="sibi-inq-input" id="pinq-email" placeholder="Email *" />',
  175.                 '<input type="text" class="sibi-inq-input" id="pinq-date-place" placeholder="Datum i mjesto isporuke" />',
  176.                 '<input type="number" class="sibi-inq-input" id="pinq-guests" placeholder="Broj gostiju" min="1" />',
  177.                 '<select class="sibi-inq-input" id="pinq-category">',
  178.                 '  <option value="">Prigoda...</option>',
  179.                 '  <option>Vjenčanje</option><option>Krštenje</option><option>Rođendan</option>',
  180.                 '  <option>Pričest / Krizma</option><option>Korporativni event</option><option>Ostalo</option>',
  181.                 '</select>',
  182.                 '<textarea class="sibi-inq-input" id="pinq-message" rows="3" placeholder="Opis torte ili kolača..."></textarea>',
  183.                 '<div class="sibi-photo-upload">',
  184.                 '  <input type="file" id="pinq-photos" accept="image/*" multiple style="display:none;">',
  185.                 '  <label for="pinq-photos" class="sibi-inq-photo-label">📷 Dodaj fotografije (max 6)</label>',
  186.                 '  <div id="pinq-photos-preview" class="sibi-photos-preview"></div>',
  187.                 '</div>',
  188.                 '<div class="sibi-inq-actions">',
  189.                 '  <button type="button" id="pinq-submit" class="sibi-inq-btn-send">Pošalji upit 🚀</button>',
  190.                 '  <button type="button" id="pinq-cancel" class="sibi-inq-btn-cancel">Odustani</button>',
  191.                 '</div>',
  192.                 '<p class="sibi-inq-note">* Obavezna polja</p>',
  193.             ].join('');
  195.             messagesEl.appendChild(wrapper);
  196.             messagesEl.scrollTop = messagesEl.scrollHeight;
  198.             wrapper.querySelector('#pinq-photos').addEventListener('change', function () {
  199.                 var preview = document.getElementById('pinq-photos-preview');
  200.                 preview.innerHTML = '';
  201.                 Array.from(this.files).slice(0, 6).forEach(function (file) {
  202.                     var reader = new FileReader();
  203.                     reader.onload = function (e) {
  204.                         var img = document.createElement('img'); img.src = e.target.result; preview.appendChild(img);
  205.                     };
  206.                     reader.readAsDataURL(file);
  207.                 });
  208.             });
  210.             document.getElementById('pinq-cancel').addEventListener('click', function () {
  211.                 wrapper.parentNode.removeChild(wrapper);
  212.                 inquiryFormVisible = false;
  213.                 setQuickReplies([{ label: 'Pošalji upit' }, { label: 'Kalkulator', href: '/svadbeni-kalkulator' }]);
  214.             });
  216.             document.getElementById('pinq-submit').addEventListener('click', function () {
  217.                 var name  = document.getElementById('pinq-name').value.trim();
  218.                 var phone = document.getElementById('pinq-phone').value.trim();
  219.                 var email = document.getElementById('pinq-email').value.trim();
  220.                 if (!name || !phone || !email) { alert('Upiši ime, broj mobitela i email!'); return; }
  222.                 var btn = document.getElementById('pinq-submit');
  223.                 btn.disabled = true; btn.textContent = 'Šaljem...';
  225.                 var fd = new FormData();
  226.                 fd.append('name', name);
  227.                 fd.append('phone', phone);
  228.                 fd.append('email', email);
  229.                 fd.append('date_place', document.getElementById('pinq-date-place').value.trim());
  230.                 fd.append('guests', parseInt(document.getElementById('pinq-guests').value) || 0);
  231.                 fd.append('category', document.getElementById('pinq-category').value);
  232.                 fd.append('message', document.getElementById('pinq-message').value.trim());
  233.                 fd.append('session_token', sessionToken || '');
  235.                 var photoInput = document.getElementById('pinq-photos');
  236.                 if (photoInput && photoInput.files.length > 0) {
  237.                     Array.from(photoInput.files).slice(0, 6).forEach(function (f) { fd.append('photos[]', f); });
  238.                 }
  240.                 fetch('/chatbot/inquiry', { method: 'POST', body: fd })
  241.                     .then(function (r) {
  242.                         if (!r.ok) { throw new Error('server'); }
  243.                         return r.json();
  244.                     })
  245.                     .then(function (d) {
  246.                         wrapper.parentNode.removeChild(wrapper);
  247.                         inquiryFormVisible = false;
  248.                         addMessage(d.message || 'Upit poslan! Javimo se uskoro. 🍰', 'bot');
  249.                     })
  250.                     .catch(function () {
  251.                         btn.disabled = false; btn.textContent = 'Pošalji upit 🚀';
  252.                         alert('Greška pri slanju. Pokušaj ponovo.');
  253.                     });
  254.             });
  255.         }
  257.         // Pozdrav
  258.         addMessage('Bok! Ja sam Slađana, tvoja slatka asistentica iz 2sweet slastičarnice. 🍰', 'bot');
  259.         addMessage('Tu sam da ti pomognem odabrati savršenu tortu ili kolače za tvoj poseban dan.', 'bot');
  260.         addMessage('O čemu se radi?', 'bot');
  261.         setQuickReplies([
  262.             { label: 'Svadbena torta' },
  263.             { label: 'Torta za posebnu prigodu' },
  264.             { label: 'Kolači i desert stol' },
  265.             { label: 'Cijena i dostava' },
  266.             { label: 'Pošalji upit' }
  267.         ]);
  269.         form.addEventListener('submit', function (e) {
  270.             e.preventDefault();
  271.             var val = input.value;
  272.             input.value = '';
  273.             sendMessage(val);
  274.         });
  275.     })();
  276.     </script>
  277. {% endblock %}