<?php
$wa_workspace_tab = isset($wa_workspace_tab) ? $wa_workspace_tab : 'device';
$wa_workspace_tabs = array(
	'device' => array('url' => 'whatsapp?tab=device', 'icon' => 'fa-whatsapp', 'label' => 'DEVICE WHATSAPP'),
	'template' => array('url' => 'whatsapp?tab=template', 'icon' => 'fa-file-text-o', 'label' => 'TEMPLATE PESAN'),
	'report' => array('url' => 'whatsapp?tab=report', 'icon' => 'fa-clock-o', 'label' => 'RIWAYAT PENGIRIMAN')
);
?>
<style>
.wa-workspace-hero{--wa-hero-theme:var(--app-theme-color,#1958ae);--wa-hero-text:var(--app-theme-text-color,#fff);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;margin:0 0 18px;padding:23px 28px;border-radius:18px;background:var(--wa-hero-theme);color:var(--wa-hero-text);box-shadow:0 12px 28px rgba(15,23,42,.14)}.wa-workspace-hero-copy{display:flex;align-items:center;gap:15px}.wa-workspace-hero-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border:1px solid currentColor;border-radius:15px;background:rgba(255,255,255,.12);font-size:24px}.wa-workspace-hero h1{margin:0 0 4px;color:inherit;font-size:25px;font-weight:800}.wa-workspace-hero p{margin:0;color:inherit;opacity:.82}.wa-workspace-device-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.35)!important;border-radius:13px!important;background:#fff!important;color:var(--wa-hero-theme)!important;font-weight:800;text-decoration:none;box-shadow:0 8px 20px rgba(11,38,80,.16);transition:transform .18s ease,box-shadow .18s ease}.wa-workspace-device-action:hover{transform:translateY(-2px);color:var(--wa-hero-theme);text-decoration:none;box-shadow:0 12px 25px rgba(11,38,80,.22)}
.wa-workspace-tabs{--wa-tab-theme:var(--app-theme-color,#1958ae);--wa-tab-text:var(--app-theme-text-color,#fff);display:flex;align-items:center;gap:10px;margin:0 0 24px;padding:0 0 15px;border-bottom:1px solid #dfe6ef;overflow-x:auto;scrollbar-width:thin}.wa-workspace-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 22px;border-radius:22px;background:color-mix(in srgb,var(--wa-tab-theme) 8%,#fff);color:var(--wa-tab-theme);font-size:12px;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}.wa-workspace-tabs a:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--wa-tab-theme) 14%,#fff);color:var(--wa-tab-theme);text-decoration:none}.wa-workspace-tabs a.active{background:var(--wa-tab-theme);color:var(--wa-tab-text);box-shadow:0 7px 17px rgba(15,23,42,.18)}.wa-workspace-tabs a i{font-size:13px}.wa-tab-view{position:relative}.wa-tab-view.is-loading{min-height:360px;pointer-events:none}.wa-tab-view.is-loading:before{position:absolute;z-index:1000;inset:0;border-radius:18px;background:rgba(248,250,252,.78);backdrop-filter:blur(2px);content:""}.wa-tab-view.is-loading:after{position:absolute;z-index:1001;top:125px;left:50%;width:36px;height:36px;margin-left:-18px;border:3px solid color-mix(in srgb,var(--app-theme-color,#1958ae) 20%,#fff);border-top-color:var(--app-theme-color,#1958ae);border-radius:50%;content:"";animation:waTabSpin .65s linear infinite}@keyframes waTabSpin{to{transform:rotate(360deg)}}@media(max-width:650px){.wa-workspace-tabs{gap:8px;margin-bottom:18px}.wa-workspace-tabs a{min-height:39px;padding:0 17px;font-size:11px}}
</style>
<section class="wa-workspace-hero">
	<div class="wa-workspace-hero-copy">
		<span class="wa-workspace-hero-icon"><i class="fa fa-whatsapp"></i></span>
		<div><h1>Device WhatsApp</h1><p>Kelola koneksi perangkat WhatsApp untuk pengiriman pesan aplikasi.</p></div>
	</div>
	<?php if ($wa_workspace_tab === 'device'): ?>
		<button type="button" name="tambah" class="btn add_device wa-workspace-device-action" data-id="0"><i class="fa fa-plus"></i> Tambah Device</button>
	<?php else: ?>
		<a href="<?=base_url('whatsapp?tab=device');?>" class="wa-workspace-device-action"><i class="fa fa-whatsapp"></i> Kelola Device</a>
	<?php endif; ?>
</section>
<nav class="wa-workspace-tabs" aria-label="Navigasi WhatsApp">
	<?php foreach ($wa_workspace_tabs as $tab_key => $tab): ?>
		<a href="<?=base_url($tab['url']);?>" class="<?=$wa_workspace_tab === $tab_key ? 'active' : '';?>" <?=$wa_workspace_tab === $tab_key ? 'aria-current="page"' : '';?>>
			<i class="fa <?=$tab['icon'];?>"></i><span><?=$tab['label'];?></span>
		</a>
	<?php endforeach; ?>
</nav>
<script>
(function(){
  if(window.waWorkspaceTabsBound){return;}
  window.waWorkspaceTabsBound=true;
  var cache=new Map();
  function activate(url,push){
    var current=document.querySelector('.wa-tab-view');
    if(!current){window.location.href=url;return;}
    current.classList.add('is-loading');
    document.querySelectorAll('.wa-workspace-tabs a').forEach(function(link){
      var active=link.href===url;
      link.classList.toggle('active',active);
      if(active){link.setAttribute('aria-current','page');}else{link.removeAttribute('aria-current');}
    });
    var requestUrl=new URL(url,window.location.href);
    requestUrl.searchParams.set('partial','1');
    var loader=cache.has(url)?Promise.resolve(cache.get(url)):fetch(requestUrl.toString(),{headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(response){
      if(!response.ok){throw new Error('Gagal memuat tab');}
      return response.text();
    }).then(function(html){cache.set(url,html);return html;});
    loader.then(function(html){
      var parsed=new DOMParser().parseFromString(html,'text/html');
      var incoming=parsed.querySelector('.wa-tab-view');
      if(!incoming){throw new Error('Konten tab tidak ditemukan');}
      var imported=document.importNode(incoming,true);
      current.replaceWith(imported);
      imported.querySelectorAll('script').forEach(function(oldScript){
        var script=document.createElement('script');
        Array.from(oldScript.attributes).forEach(function(attr){script.setAttribute(attr.name,attr.value);});
        script.text=oldScript.textContent;
        oldScript.replaceWith(script);
      });
      if(push){history.pushState({waTab:url},'',url);}
      window.scrollTo({top:Math.max(imported.getBoundingClientRect().top+window.scrollY-90,0),behavior:'smooth'});
    }).catch(function(){window.location.href=url;});
  }
  document.addEventListener('click',function(event){
    var link=event.target.closest('.wa-workspace-tabs a');
    if(!link||event.ctrlKey||event.metaKey||event.shiftKey||event.altKey){return;}
    event.preventDefault();
    activate(link.href,true);
  });
  window.addEventListener('popstate',function(){activate(window.location.href,false);});
  document.querySelectorAll('.wa-workspace-tabs a').forEach(function(link){
    if(!link.classList.contains('active')){
      var preloadUrl=new URL(link.href);preloadUrl.searchParams.set('partial','1');
      fetch(preloadUrl.toString(),{headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(response){return response.ok?response.text():'';}).then(function(html){if(html){cache.set(link.href,html);}}).catch(function(){});
    }
  });
})();
</script>
