const ntaiWaNumber=ntaiData.waNumber;
const ntaiWaTemplate=ntaiData.waTemplate;
const ntaiAjaxUrl=ntaiData.ajaxUrl;
const ntaiHasPrices=(typeof window.ntDataCalc!=='undefined'&&window.ntDataCalc.kalkulasi_pax)||(ntaiData.pricesJSON&&Object.keys(ntaiData.pricesJSON).length > 0);
const ntaiFeaturedImage=ntaiData.featuredImage;
const ntaiRecommendedTours=ntaiData.recommendedTours;
const ntaiGreetingText=ntaiData.greetingText;
const ntaiSelInclude=ntaiData.selInclude;
const ntaiSelExclude=ntaiData.selExclude;
const ntaiSelItinerary=ntaiData.selItinerary;
const ntaiFollowupMsg=ntaiData.followupMsg;
const ntaiFollowupTimer=ntaiData.followupTimer;
let ntaiChatLog=[];
let ntaiNudgeTimer=null;
let ntaiHasNudged=false;
window.ntaiSearchMode=false;
window.ntaiConversationHistory=[];
let ntaiLeadScore=0;
setTimeout(()=> { ntaiLeadScore +=2; }, 120000);
let ntaiHistory=JSON.parse(localStorage.getItem('ntai_tour_history'))||[];
let rawDocTitle=document.title.replace(/\s*-\s*Paket Wisata[-\s]*Nusantaratrip.*/i, '').replace(/\s*\|\s*Nusantaratrip.*/i, '').trim();
let currentTourUrl=window.location.href;
if(ntaiHistory.length===0||ntaiHistory[ntaiHistory.length - 1].url!==currentTourUrl){
ntaiHistory.push({ title: rawDocTitle, url: currentTourUrl });
if(ntaiHistory.length > 3) ntaiHistory.shift();
localStorage.setItem('ntai_tour_history', JSON.stringify(ntaiHistory));
}
let historyText=ntaiHistory.map(h=> h.title).join(", ");
function initNtaiAgent(){
const wrapper=document.getElementById("ntai-system-wrapper");
if(wrapper&&document.body) document.body.appendChild(wrapper);
const floatingBtn=document.getElementById("ntai-floating-btn");
const aiModalOverlay=document.getElementById("ntai-modal-overlay");
const closeBtn=document.getElementById("ntai-close-chat");
const badge=document.getElementById("ntai-badge-notif");
const fsBtn=document.getElementById("ntai-toggle-fs");
const iconExpand=document.getElementById("ntai-icon-expand");
const iconCollapse=document.getElementById("ntai-icon-collapse");
const chatContainer=document.getElementById("ntai-chat-container");
if(fsBtn){
fsBtn.addEventListener("click", function(){
chatContainer.classList.toggle("ntai-fullscreen");
if(chatContainer.classList.contains("ntai-fullscreen")){
iconExpand.style.display="none";
iconCollapse.style.display="block";
}else{
iconExpand.style.display="block";
iconCollapse.style.display="none";
}
setTimeout(ntaiScrollToBottom, 300);
});
}
function ntaiOpenChat(){
if(aiModalOverlay) aiModalOverlay.classList.add("show");
if(badge) badge.style.display='none';
const nudge=document.getElementById('ntai-nudge');
if(nudge) nudge.style.display='none';
const ntBookFloat=document.querySelector('.nt-float-btn');
if(ntBookFloat){ ntBookFloat.style.opacity='0'; ntBookFloat.style.pointerEvents='none'; }
setTimeout(ntaiScrollToBottom, 300);
if(!ntaiHasNudged){
ntaiNudgeTimer=setTimeout(()=> {
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
ntaiMsg(ntaiFollowupMsg + ntaiGetWaTemplate(), "ai", true);
ntaiHasNudged=true;
}, 1000);
}, ntaiFollowupTimer);
}}
function ntaiCloseChat(){
if(aiModalOverlay) aiModalOverlay.classList.remove("show");
const ntBookFloat=document.querySelector('.nt-float-btn');
if(ntBookFloat){ ntBookFloat.style.opacity=''; ntBookFloat.style.pointerEvents=''; }
if(chatContainer&&chatContainer.classList.contains("ntai-fullscreen")){
chatContainer.classList.remove("ntai-fullscreen");
iconExpand.style.display="block";
iconCollapse.style.display="none";
}}
if(floatingBtn) floatingBtn.addEventListener("click", ntaiOpenChat);
if(closeBtn) closeBtn.addEventListener("click", ntaiCloseChat);
if(aiModalOverlay){ aiModalOverlay.addEventListener("click", function(e){ if(e.target===this) ntaiCloseChat(); });}
setTimeout(()=> {
const nudge=document.getElementById('ntai-nudge');
const overlay=document.getElementById('ntai-modal-overlay');
if(nudge&&overlay&&!overlay.classList.contains('show')) nudge.classList.add('show-nudge');
}, 3000);
setInterval(function(){
if(!floatingBtn) return;
const modals=document.querySelectorAll('.nt-modal-overlay, #reviewModal');
let isAnyModalOpen=false;
modals.forEach(m=> {
const style=window.getComputedStyle(m);
if(style.display!=='none'&&style.opacity!=='0'&&style.visibility!=='hidden') isAnyModalOpen=true;
});
if(aiModalOverlay&&aiModalOverlay.classList.contains('show')) isAnyModalOpen=true;
if(isAnyModalOpen) floatingBtn.classList.add('ntai-hidden');
else floatingBtn.classList.remove('ntai-hidden');
}, 300);
const sendBtn=document.getElementById("ntai-send");
const inputField=document.getElementById("ntai-text");
setTimeout(()=> {
const jam=new Date().getHours();
let sapaanWaktu="Halo";
if(jam >=3&&jam < 11){ sapaanWaktu="Selamat Pagi"; }
else if(jam >=11&&jam < 15){ sapaanWaktu="Selamat Siang"; }
else if(jam >=15&&jam < 18){ sapaanWaktu="Selamat Sore"; }else{ sapaanWaktu="Selamat Malam"; }
let dynamicGreeting=ntaiGreetingText.replace(/paket wisata ini/gi, `paket wisata <strong>${rawDocTitle}</strong>`);
dynamicGreeting=dynamicGreeting.replace(/\[judul_paket\]/gi, `<strong>${rawDocTitle}</strong>`);
ntaiMsg(`<strong>${sapaanWaktu} Kak! 👋</strong> ${dynamicGreeting}`, "ai", true);
ntaiAppendQuickReplies();
}, 600);
function ntaiHandleUserInput(){
if(!inputField) return;
const q=inputField.value.trim();
if(!q) return;
const qrs=document.querySelectorAll('.ntai-quick-replies');
qrs.forEach(qr=> qr.remove());
inputField.value="";
clearTimeout(ntaiNudgeTimer);
ntaiHasNudged=true;
ntaiProcessApiRequest(q);
}
if(sendBtn) sendBtn.onclick=ntaiHandleUserInput;
if(inputField){
inputField.addEventListener("keypress", function(event){
if(event.key==="Enter"){ event.preventDefault(); ntaiHandleUserInput(); }});
}}
window.ntaiOpenWaChat=function(e){
if(e) e.preventDefault();
let waText=ntaiWaTemplate.replace(/\[judul_paket\]/g, rawDocTitle).replace(/\[url_paket\]/g, currentTourUrl);
if(ntaiChatLog.length > 0){
waText +=`*-- Riwayat Chat dengan AI --*\n`;
let recentChats=ntaiChatLog.slice(-6);
recentChats.forEach(chat=> {
let cleanMsg=chat.msg.replace(/<[^>]*>?/gm, '');
waText +=`_${chat.sender}_: ${cleanMsg}\n`;
});
}
if(ntaiLeadScore >=3){ waText +=`\n\n[Sistem: 🔥 Folow up Prioritas]`; }
if(typeof gtag!=='undefined'){ gtag('event', 'generate_lead', { 'event_category': 'WhatsApp', 'event_label': 'AI_Agent' });}
if(typeof fbq!=='undefined'){ fbq('track', 'Contact'); }
window.open(`https://wa.me/${ntaiWaNumber}?text=${encodeURIComponent(waText)}`, '_blank');
};
function ntaiGetWaTemplate(){
return `<div class="ntai-wa-action-box"><a class="ntai-wa-btn" href="#" onclick="window.ntaiOpenWaChat(event)"><svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg> Konsultasi via WA</a></div>`;
}
const ntaiSvgSum=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>`;
const ntaiSvgItin=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
const ntaiSvgFac=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
const ntaiSvgPrice=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>`;
const ntaiSvgRec=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`;
const ntaiSvgSearch=`<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`;
const ntaiQuickRepliesTpl=`
<div class="ntai-quick-replies" id="ntai-qr-container">
<button class="ntai-qr-btn nt-trigger-wizard" style="border-color:#16a34a; color:#15803d; background:#f0fdf4; font-weight:800; width:100%; margin-bottom:8px; justify-content:center;">✨ Rancang Custom Tour Sendiri</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('summary')">${ntaiSvgSum} Ringkasan</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('itinerary')">${ntaiSvgItin} Itinerary</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('facility')">${ntaiSvgFac} Fasilitas</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('price')">${ntaiSvgPrice} Harga</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('recommendation')">${ntaiSvgRec} Paket Lain</button>
<button class="ntai-qr-btn" onclick="window.ntaiAction('search')">${ntaiSvgSearch} Cari Tour</button>
</div>
`;
function ntaiAppendQuickReplies(){
const existing=document.getElementById("ntai-qr-container");
if(existing) existing.remove();
const chat=document.getElementById("ntai-chat-body");
if(!chat) return;
const div=document.createElement("div");
div.innerHTML=ntaiQuickRepliesTpl;
chat.appendChild(div);
ntaiScrollToBottom();
}
function ntaiFormatText(text){
if(!text) return "";
let formatted=text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
formatted=formatted.replace(/\*(.*?)\*/g, '<em>$1</em>');
formatted=formatted.replace(/(?:^|\n)\* (.*?)(?=\n|$)/g, '<li>$1</li>');
formatted=formatted.replace(/(?:^|\n)- (.*?)(?=\n|$)/g, '<li>$1</li>');
if(formatted.includes('<li>')){ formatted=formatted.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>'); }
formatted=formatted.replace(/\n/g, '<br>');
formatted=formatted.replace(/<br>\s*<ul>/g, '<ul>');
formatted=formatted.replace(/<\/ul>\s*<br>/g, '</ul>');
formatted=formatted.replace(/<br>\s*<li>/g, '<li>');
return formatted;
}
function ntaiScrollToBottom(){
const chat=document.getElementById("ntai-chat-body");
if(chat) chat.scrollTop=chat.scrollHeight;
}
function ntaiMsg(text, type, isHtmlRaw=false){
const chat=document.getElementById("ntai-chat-body");
if(!chat) return null;
const div=document.createElement("div");
div.className="ntai-msg " + (type==="user" ? "ntai-user-msg":"ntai-ai-msg");
if(type==="ai"){ div.innerHTML=isHtmlRaw ? text:ntaiFormatText(text); }else{ div.innerHTML=ntaiFormatText(text); }
chat.appendChild(div);
ntaiScrollToBottom();
return div;
}
function ntaiShowTyping(){
const chat=document.getElementById("ntai-chat-body");
if(!chat) return;
const div=document.createElement("div");
div.id="ntai-typing-indicator";
div.className="ntai-typing";
div.innerHTML="<span></span><span></span><span></span>";
chat.appendChild(div);
ntaiScrollToBottom();
}
function ntaiHideTyping(){
const indicator=document.getElementById("ntai-typing-indicator");
if(indicator) indicator.remove();
}
window.ntaiAction=function(actionType){
const qrs=document.querySelectorAll('.ntai-quick-replies');
qrs.forEach(qr=> qr.remove());
clearTimeout(ntaiNudgeTimer);
ntaiHasNudged=true;
if(actionType==='search'){
const userMsg="Cari Paket Wisata Lain";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
window.ntaiSearchMode=true;
const responseText=`Tentu Kak! Silakan ketik kota atau destinasi yang Kakak cari (contoh: *Jogja*, *Bali*, *Bromo*):`;
ntaiMsg(ntaiFormatText(responseText), "ai", true);
ntaiChatLog.push({sender: "Sistem", msg: "Meminta keyword pencarian."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: responseText }] });
}, 500);
}
else if(actionType==='summary'){
const userMsg="Berikan Ringkasan Paket";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
const excerptEl=document.getElementById("ntai-hidden-excerpt-data");
let summaryText=(excerptEl&&excerptEl.innerText.trim()!=="") ? excerptEl.innerText.trim().replace(/\n/g, '<br>'):"Ringkasan paket wisata ini belum tersedia.";
let responseHtml=`
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="display:flex; align-items:center; gap:8px; margin-bottom:10px; border-bottom:1px dashed #cbd5e1; padding-bottom:10px;">
<span style="font-size:18px;">✨</span>
<h4 style="margin:0; color:#15803d; font-size:14.5px; font-weight:700;">Ringkasan Paket Wisata</h4>
</div>
<p style="margin:0; color:#334155; font-size:13.5px; line-height:1.6;">${summaryText}</p>
</div>`;
const newBubble=ntaiMsg(responseHtml + ntaiGetWaTemplate(), "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan ringkasan UI Baru."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: summaryText }] });
ntaiAppendQuickReplies();
}, 500);
}
else if(actionType==='itinerary'){
ntaiLeadScore +=2;
const userMsg="Tampilkan Itinerary Perjalanan";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
const itinRaw=document.querySelector(ntaiSelItinerary);
let itinText="Data itinerary detail belum tersedia di halaman ini.";
if(itinRaw){
const clone=itinRaw.cloneNode(true);
clone.style.position='absolute';
clone.style.left='-9999px';
const allElements=clone.querySelectorAll('*');
allElements.forEach(el=> { el.style.display='block'; el.style.visibility='visible'; el.style.height='auto'; });
document.body.appendChild(clone);
let rawText=clone.innerText.trim();
document.body.removeChild(clone);
rawText=rawText.replace(/^(Hari\s*(?:ke\s*-?\s*)?\d+.*)/gmi, '||HARI||$1');
rawText=rawText.replace(/^(Day\s*\d+.*)/gmi, '||HARI||$1');
let parts=rawText.split('||HARI||');
itinText=parts[0] ? `<p style="margin-bottom:12px; font-size:13.5px; color:#475569; padding-left:5px;">${parts[0].replace(/\n/g, ' ')}</p>`:'';
for(let i=1; i < parts.length; i++){
let splitPart=parts[i].split('\n');
let hariTitle=splitPart.shift().replace(/\*\*/g, '').trim();
let content=splitPart.join(' ').replace(/\s+/g, ' ').trim();
content=content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
content=content.replace(/(^|[^\d])(\d{2}[.:]\d{2}(?:\s*[-–]\s*\d{2}[.:]\d{2})?(?:\s*(?:WIB|WITA|WIT))?)(?!\d)/gi, '$1<div style="margin-top:10px; margin-bottom:4px;"><span style="display:inline-flex; align-items:center; background:#f1f5f9; color:#475569; padding:3px 10px; border-radius:6px; font-weight:800; font-size:11.5px; border:1px solid #cbd5e1;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-right:4px;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> $2</span></div>');
itinText +=`
<div style="margin-bottom: 14px; border-left: 2px dashed #16a34a; padding-left: 14px; margin-left: 8px; position:relative;">
<div style="position:absolute; left:-7.5px; top:2px; width:13px; height:13px; background:#16a34a; border-radius:50%; border:3px solid #ffffff;"></div>
<div style="background:#dcfce7; color:#15803d; display:inline-block; padding:4px 10px; border-radius:6px; font-weight:700; font-size:12.5px; margin-bottom:8px; margin-top:-4px; border:1px solid #bbf7d0;">📍 ${hariTitle}</div>
<div style="font-size:13px; color:#334155; line-height:1.6;">${content}</div>
</div>`;
}}
let imageHtml="";
if(ntaiFeaturedImage){
imageHtml=`<img src="${ntaiFeaturedImage}" alt="Destinasi Wisata" style="width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: 8px; margin-bottom: 12px; border: 1px solid #e2e8f0; background: #f8fafc; display: block; margin-left: auto; margin-right: auto;">`;
}
let responseHtml=`
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
${imageHtml}
<div style="display:flex; align-items:center; gap:8px; margin-bottom:16px; border-bottom:1px dashed #cbd5e1; padding-bottom:10px;">
<span style="font-size:18px;">🗺️</span>
<h4 style="margin:0; color:#0f172a; font-size:14.5px; font-weight:700;">Detail Itinerary</h4>
</div>
<div style="margin-top:10px; padding-right:5px;">
${itinText==="Data itinerary detail belum tersedia di halaman ini." ? `<div style="background:#fef2f2; padding:10px; border-radius:8px; color:#b91c1c; font-size:13px; text-align:center;">${itinText}</div>`:itinText}
</div>
</div>`;
const newBubble=ntaiMsg(responseHtml + ntaiGetWaTemplate(), "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan Itinerary UI Baru."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: "Ini adalah rincian itinerary yang bisa saya tampilkan." }] });
ntaiAppendQuickReplies();
}, 500);
}
else if(actionType==='facility'){
const userMsg="Cek Fasilitas Paket";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
const incRaw=document.querySelector(ntaiSelInclude) ? document.querySelector(ntaiSelInclude).innerText:"Data tidak ditemukan.";
const excRaw=document.querySelector(ntaiSelExclude) ? document.querySelector(ntaiSelExclude).innerText:"Data tidak ditemukan.";
function formatListUi(text, isInclude){
if(text.includes("Data tidak ditemukan")) return `<p style="margin:0; font-size:13px; color:#64748b;">${text}</p>`;
let items=text.split('\n').filter(i=> i.trim()!=='');
let iconSvg=isInclude
? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>'
: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>';
let html='<div style="display:flex; flex-direction:column; gap:8px;">';
items.forEach(item=> {
item=item.replace(/^[-*•]\s*/, '').replace(/^\d+[\.\)]\s*/, '').trim();
if(item){ html +=`<div style="display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#334155; line-height:1.5;"><span style="flex-shrink:0; margin-top:1px;">${iconSvg}</span> <span>${item}</span></div>`; }});
html +='</div>';
return html;
}
let responseHtml=`
<div style="margin-bottom:12px;">
<div style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
<h4 style="margin:0 0 12px 0; color:#15803d; font-size:14.5px; font-weight:700; border-bottom:1px dashed #bbf7d0; padding-bottom:8px;">✅ Termasuk (Include)</h4>
${formatListUi(incRaw, true)}
</div>
<div style="background:#fef2f2; border:1px solid #fecaca; border-radius:12px; padding:14px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
<h4 style="margin:0 0 12px 0; color:#b91c1c; font-size:14.5px; font-weight:700; border-bottom:1px dashed #fecaca; padding-bottom:8px;">❌ Belum Termasuk (Exclude)</h4>
${formatListUi(excRaw, false)}
</div>
</div>`;
const newBubble=ntaiMsg(responseHtml + ntaiGetWaTemplate(), "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan daftar fasilitas UI Baru."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: "Ini adalah daftar fasilitas include dan exclude." }] });
ntaiAppendQuickReplies();
}, 500);
}
else if(actionType==='price'){
ntaiLeadScore +=2;
const userMsg="Cek Daftar Harga";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
let priceHtml="";
const sourceTable=document.querySelector('.nt-table-wrapper');
if(sourceTable){
priceHtml=`
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px; border-bottom:1px dashed #cbd5e1; padding-bottom:10px;">
<span style="font-size:18px;">💰</span>
<h4 style="margin:0; color:#15803d; font-size:14.5px; font-weight:700;">Daftar Harga Per Orang</h4>
</div>
<div style="overflow-x:auto; margin-bottom:10px;">
${sourceTable.outerHTML}
</div>
<div style="margin-top:12px; padding-top:10px; border-top:1px dashed #cbd5e1; font-size:11.5px; color:#64748b; line-height:1.5;">
<span style="color:#ef4444; font-weight:700;">*Note:</span> Harga dapat menyesuaikan jika ada permintaan <em>Custom Tour</em> atau saat <em>High Season</em>. Anak < 6 Th dikenakan biaya tiket masuk saja.
</div>
</div>`;
}else{
priceHtml=`
<div style="background:#fef2f2; border:1px solid #fecaca; border-radius:12px; padding:14px; text-align:center; margin-bottom:12px;">
<span style="font-size:24px;">💸</span>
<p style="margin:8px 0 0 0; color:#b91c1c; font-size:13.5px; line-height:1.5;">Maaf Kak, daftar harga detail belum tersedia di halaman ini. Silakan langsung hubungi Admin ya.</p>
</div>`;
}
const newBubble=ntaiMsg(priceHtml + ntaiGetWaTemplate(), "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan tabel harga Matrix."});
const taraRef=document.getElementById('tara-reference-data');
let memoryPriceText=taraRef ? "Tampilkan UI Harga. Gunakan data berikut untuk info selanjutnya: " + taraRef.innerText:"Menampilkan UI Tabel Harga.";
ntaiConversationHistory.push({ role: "model", parts: [{ text: memoryPriceText }] });
ntaiAppendQuickReplies();
}, 500);
}
else if(actionType==='recommendation'){
const userMsg="Cek Paket Tour Lainnya";
ntaiMsg(userMsg, "user");
ntaiChatLog.push({sender: "Tamu", msg: userMsg});
ntaiConversationHistory.push({ role: "user", parts: [{ text: userMsg }] });
ntaiShowTyping();
setTimeout(()=> {
ntaiHideTyping();
let recHtml="Tentu Kak! Berdasarkan destinasi ini, kami merekomendasikan paket tour pilihan berikut:<br><br>";
if(ntaiRecommendedTours&&ntaiRecommendedTours.length > 0){
ntaiRecommendedTours.forEach(tour=> {
recHtml +=`
<a href="${tour.url}" class="ntai-rec-card" target="_blank">
<img src="${tour.thumb}" class="ntai-rec-img" alt="Thumbnail">
<h4 class="ntai-rec-title">${tour.title}</h4>
</a>`;
});
recHtml +="<br><span style='font-size:13px;'>Silakan klik kartu paket di atas untuk melihat rinciannya ya, atau hubungi Admin jika ingin *Custom Tour*!</span>";
}else{
recHtml="Maaf Kak, saat ini belum ada rekomendasi paket di destinasi yang sama. Silakan klik tombol WA di bawah untuk ngobrol dengan Admin kami ya.";
}
const newBubble=ntaiMsg(recHtml + ntaiGetWaTemplate(), "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan rekomendasi tour sesuai destinasi."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: "Ini daftar rekomendasi tour lainnya." }] });
ntaiAppendQuickReplies();
}, 500);
}};
function ntaiGetPayloadData(q){
let qLower=q.toLowerCase();
let contentArr=[`Judul: ${rawDocTitle}`];
let priceDataFormatted="Harga tidak tersedia.";
if(qLower.match(/harga|biaya|orang|pax|anak|balita|berapa|tambahan|jemput|kota|area|hotel/)){
const taraRef=document.getElementById('tara-reference-data');
if(taraRef){
priceDataFormatted=taraRef.innerText;
}}
function getCleanText(element){
if(!element) return "Data tidak ditemukan.";
const clone=element.cloneNode(true);
const tables=clone.querySelectorAll('.tablepress, table');
tables.forEach(t=> t.remove());
return clone.innerText.replace(/\s+/g, ' ').trim();
}
if(qLower.match(/jadwal|jam|itinerary|rute|kapan|kemana|hari|jemput|kota|area/)){
let routeFound=false;
const jsonLdScripts=document.querySelectorAll('script[type="application/ld+json"]');
jsonLdScripts.forEach(script=> {
try {
const schemaData=JSON.parse(script.innerText);
if(schemaData['@type']==='TouristTrip'&&schemaData.itinerary){
let ruteArr=[];
schemaData.itinerary.itemListElement.forEach(item=> {
if(item.item&&item.item.name){
ruteArr.push(item.item.name.trim());
}});
contentArr.push(`Rute Perjalanan: ${ruteArr.join(" ➡️ ")}`);
routeFound=true;
}} catch (e){  }});
if(!routeFound){
const excerptEl=document.querySelector("#ntai-hidden-excerpt-data");
if(excerptEl) contentArr.push(`Ringkasan Itinerary: ${getCleanText(excerptEl).substring(0, 500)}`);
}}
if(qLower.match(/fasilitas|termasuk|include|exclude|makan|hotel|tiket|dapat/)){
const incEl=document.querySelector(ntaiSelInclude);
const excEl=document.querySelector(ntaiSelExclude);
if(incEl) contentArr.push(`Inc: ${getCleanText(incEl).substring(0, 300)}`);
if(excEl) contentArr.push(`Exc: ${getCleanText(excEl).substring(0, 300)}`);
}
const customInfos=document.querySelectorAll('.ntai-custom-info');
customInfos.forEach(info=> {
const title=info.getAttribute('data-title')||'Info Penting';
const contentBox=info.querySelector('.nt-info-app');
if(contentBox){
const text=getCleanText(contentBox);
if(text) contentArr.push(`${title}: ${text.substring(0, 1200)}`);
}});
if(ntaiRecommendedTours&&ntaiRecommendedTours.length > 0){
let recNames=ntaiRecommendedTours.map(tour=> tour.title).join(", ");
contentArr.push(`Rekomendasi Paket Lain di Area Ini: ${recNames}`);
}
return { priceStr: priceDataFormatted, contentStr: contentArr.join(" | ") };}
function ntaiProcessApiRequest(q){
let qLower=q.toLowerCase();
ntaiMsg(q, "user");
ntaiChatLog.push({sender: "Tamu", msg: q});
ntaiShowTyping();
ntaiConversationHistory.push({ role: "user", parts: [{ text: q }] });
let isSearchIntent=window.ntaiSearchMode||qLower.startsWith('cari ')||qLower.includes('wisata ke')||qLower.includes('tour ke')||qLower.includes('paket ke');
if(isSearchIntent){
window.ntaiSearchMode=false;
let searchKeyword=q.replace(/cari|paket|wisata|tour|ke|untuk/gi, '').trim();
if(!searchKeyword) searchKeyword=q;
let formData=new FormData();
formData.append('action', 'ntai_global_search');
formData.append('keyword', searchKeyword);
fetch(ntaiAjaxUrl, { method: 'POST', body: formData })
.then(r=> r.json())
.then(resData=> {
ntaiHideTyping();
let replyHtml="";
if(resData.success&&resData.data.length > 0){
replyHtml=`Ini daftar rekomendasi **${searchKeyword.toUpperCase()}** yang saya temukan untuk Kakak:<br><br>`;
resData.data.forEach(tour=> {
replyHtml +=`
<a href="${tour.url}" class="ntai-rec-card" target="_blank">
<img src="${tour.thumb}" class="ntai-rec-img" alt="Thumbnail">
<h4 class="ntai-rec-title">${tour.title}</h4>
</a>`;
});
replyHtml +=`<br><span style='font-size:13px;'>Silakan klik kartu di atas untuk rincian itinerary, atau hubungi kami untuk konfirmasi ketersediaan.</span>` + ntaiGetWaTemplate();
}else{
replyHtml=`Maaf Kak, saat ini saya belum menemukan paket untuk destinasi **"${searchKeyword}"** di database otomatis kami.<br><br>Tapi tenang, Tim Konsultan kami siap merancangkan Custom Itinerary khusus untuk Kakak! 😊` + ntaiGetWaTemplate();
}
const newBubble=ntaiMsg(replyHtml, "ai", true);
setTimeout(()=> { if(newBubble) document.getElementById("ntai-chat-body").scrollTo({ top: newBubble.offsetTop - 15, behavior: 'smooth' });}, 300);
ntaiChatLog.push({sender: "Sistem", msg: "Menampilkan hasil pencarian global."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: "Ini daftar rekomendasi yang saya temukan." }] });
ntaiAppendQuickReplies();
})
.catch(err=> {
ntaiHideTyping();
ntaiMsg(`Sistem pencarian kami sedang ada sedikit gangguan koneksi nih Kak 🙏. Silakan klik tombol WA di bawah ya agar dibantu cari langsung oleh Admin kami.` + ntaiGetWaTemplate(), "ai", true);
ntaiAppendQuickReplies();
});
return;
}
if(qLower.includes('pesan')||qLower.includes('booking')||qLower.includes('daftar')||qLower.includes('reservasi')||qLower.includes('book')){
setTimeout(()=> {
ntaiHideTyping();
let reply="Wah, mantap! 🎉 Untuk proses booking, reservasi, dan pengecekan ketersediaan jadwal, Kakak bisa langsung terhubung dengan Admin Reservasi kami ya.<br><br>Yuk klik tombol WhatsApp di bawah ini agar ketersediaannya bisa segera kami amankan!";
ntaiMsg(ntaiFormatText(reply) + ntaiGetWaTemplate(), "ai", true);
ntaiChatLog.push({sender: "Sistem", msg: "Diarahkan ke WA untuk booking."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: reply }] });
ntaiAppendQuickReplies();
}, 600);
return;
}
if(qLower.includes('tersedia')||qLower.includes('ketersediaan')||qLower.includes('slot')||qLower.includes('kuota')||qLower.includes('kosong')||qLower.includes('sisa')){
setTimeout(()=> {
ntaiHideTyping();
let reply="Berdasarkan sistem kami, untuk saat ini jadwal tersebut **sementara masih tersedia** Kak. ✅<br><br>Namun karena pergerakan kuota kami sangat cepat dan sering penuh, kami sangat menyarankan untuk segera melakukan *booking*.<br><br>Yuk amankan ketersediaan Kakak dengan menghubungi Admin Reservasi kami via WhatsApp di bawah ini!";
ntaiMsg(ntaiFormatText(reply) + ntaiGetWaTemplate(), "ai", true);
ntaiChatLog.push({sender: "Sistem", msg: "Menjawab ketersediaan (FOMO) & arahkan ke WA."});
ntaiConversationHistory.push({ role: "model", parts: [{ text: reply }] });
ntaiAppendQuickReplies();
}, 600);
return;
}
const payload=ntaiGetPayloadData(q);
fetch("/wp-json/nt-ai/v1/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
question: q,
conversation_history: ntaiConversationHistory.slice(-6),
price_data: payload.priceStr,
content_data: payload.contentStr,
history_data: historyText,
user: "Tamu",
url: window.location.href
})
})
.then(r=> r.json())
.then(res=> {
ntaiHideTyping();
let answer=res.answer||"";
let cleanAiAnswer=answer.replace(/\*/g, '').replace(/\n/g, ' ').substring(0, 100);
if(answer.length > 100) cleanAiAnswer +='...';
ntaiChatLog.push({sender: "Sistem", msg: cleanAiAnswer});
ntaiConversationHistory.push({ role: "model", parts: [{ text: answer }] });
if(answer.toLowerCase().includes("tidak tersedia")||answer.toLowerCase().includes("tidak menemukan")||answer.length < 5){
ntaiMsg(`Wah, maaf Kak, untuk info sedetail itu kebetulan belum tercatat di panduan singkat saya 😅.<br><br>Biar informasinya lebih akurat dan pasti, yuk langsung ngobrol sama Tim Admin kami via tombol WhatsApp di bawah ini!` + ntaiGetWaTemplate(), "ai", true);
}else{
ntaiMsg(ntaiFormatText(answer) + ntaiGetWaTemplate(), "ai", true);
}
ntaiAppendQuickReplies();
})
.catch(err=> {
ntaiHideTyping();
ntaiMsg(`Waduh Kak, sinyal internetnya sepertinya lagi kurang bersahabat nih 😅. Coba kirim ulang pertanyaannya ya, atau langsung klik tombol WA di bawah biar aman.` + ntaiGetWaTemplate(), "ai", true);
ntaiAppendQuickReplies();
});
}
let ntaiInitDone=false;
function triggerNtaiInit(){
if(ntaiInitDone) return;
ntaiInitDone=true;
initNtaiAgent();
window.removeEventListener('scroll', triggerNtaiInit);
window.removeEventListener('mousemove', triggerNtaiInit);
window.removeEventListener('touchstart', triggerNtaiInit);
document.removeEventListener('click', triggerNtaiInit);
}
window.addEventListener('scroll', triggerNtaiInit, { passive: true });
window.addEventListener('mousemove', triggerNtaiInit, { passive: true });
window.addEventListener('touchstart', triggerNtaiInit, { passive: true });
document.addEventListener('click', triggerNtaiInit, { passive: true });
setTimeout(triggerNtaiInit, 4000);
document.addEventListener('click', function(e){
const wizardBtn=e.target.closest('.nt-trigger-wizard');
if(wizardBtn){
e.preventDefault();
const aiModalOverlay=document.getElementById("ntai-modal-overlay");
if(aiModalOverlay) aiModalOverlay.classList.remove("show");
const ntBookFloat=document.querySelector('.nt-float-btn');
if(ntBookFloat){ ntBookFloat.style.opacity=''; ntBookFloat.style.pointerEvents=''; }
const chatContainer=document.getElementById("ntai-chat-container");
const iconExpand=document.getElementById("ntai-icon-expand");
const iconCollapse=document.getElementById("ntai-icon-collapse");
if(chatContainer&&chatContainer.classList.contains("ntai-fullscreen")){
chatContainer.classList.remove("ntai-fullscreen");
if(iconExpand) iconExpand.style.display="block";
if(iconCollapse) iconCollapse.style.display="none";
}
setTimeout(function(){
const wizOverlay=document.getElementById('nt-wizard-overlay');
if(wizOverlay){
wizOverlay.style.zIndex='2147483647';
wizOverlay.classList.add('show');
document.body.style.overflow='hidden';
}}, 50);
}});