{{-- App bar ala GoPay (hanya tampil di HP): panah kembali di kiri, bagikan + bantuan di kanan.
     Pakai: @include('partials.app-bar', ['back' => route('...')])
     Tanpa tombol kanan: tambahkan 'actions' => false --}}
@php $abHelp = \Illuminate\Support\Facades\Route::has('support.create') ? route('support.create') : null; @endphp
<style>
.app-bar{display:none}
@media(max-width:1023px){
    .app-bar{
        display:flex;align-items:center;justify-content:space-between;
        position:sticky;top:0;z-index:40;
        margin:0 -14px 10px;
        padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
        background:var(--bg);
    }
    .ab-right{display:flex;align-items:center;gap:8px}
    .ab-btn{
        width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
        display:flex;align-items:center;justify-content:center;
        background:transparent;color:var(--text);font-size:18px;text-decoration:none;
        -webkit-tap-highlight-color:transparent;
    }
    .ab-btn:active{background:var(--elevated)}
    .ab-help{background:var(--text2);color:var(--bg);width:30px;height:30px;font-size:14px;font-weight:800}
    /* Halaman pas 1 layar → kunci, tidak bisa digeser atas/bawah */
    html.ab-lock, html.ab-lock body{overflow:hidden!important;height:100%;overscroll-behavior:none}
}
</style>
<div class="app-bar">
    <a href="{{ $back }}" class="ab-btn" aria-label="Kembali"><i class="fas fa-arrow-left"></i></a>
    @if($actions ?? true)
    <div class="ab-right">
        <button type="button" class="ab-btn" id="abShare" aria-label="Bagikan"><i class="fas fa-share-nodes"></i></button>
        @if($abHelp)
        <a href="{{ $abHelp }}" class="ab-btn ab-help" aria-label="Bantuan"><i class="fas fa-question"></i></a>
        @endif
    </div>
    @endif
</div>
<script>
(function(){
    var b = document.getElementById('abShare');
    if (!b) return;
    b.addEventListener('click', function(){
        var data = { title: document.title, url: location.href };
        if (navigator.share) { navigator.share(data).catch(function(){}); return; }
        if (navigator.clipboard) { navigator.clipboard.writeText(location.href).then(function(){ alert('Link disalin'); }); }
    });
})();

(function(){
    // Kunci scroll hanya kalau seluruh isi halaman muat di satu layar (HP).
    // Kalau isi lebih panjang dari layar (mis. QR / kode OTP panjang), scroll tetap aktif supaya tidak terpotong.
    var root = document.documentElement;
    var mq = window.matchMedia('(max-width:1023px)');
    function contentBottom(){
        var main = document.querySelector('.desk-main');
        if (!main) return Infinity;
        var max = 0;
        Array.prototype.forEach.call(main.children, function(el){
            var cs = getComputedStyle(el);
            if (cs.display === 'none' || cs.position === 'fixed') return;
            var r = el.getBoundingClientRect();
            if (r.height === 0) return;
            var bottom = r.bottom + (window.pageYOffset || 0) + (parseFloat(cs.marginBottom) || 0);
            if (bottom > max) max = bottom;
        });
        return max + 14; // padding bawah .desk-main
    }
    function update(){
        var vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
        var fits = mq.matches && contentBottom() <= vh;
        if (fits) { root.classList.add('ab-lock'); window.scrollTo(0, 0); }
        else { root.classList.remove('ab-lock'); }
    }
    window.addEventListener('load', update);
    window.addEventListener('resize', update);
    window.addEventListener('orientationchange', update);
    try {
        var main = document.querySelector('.desk-main');
        if (main && window.MutationObserver) {
            new MutationObserver(function(){ setTimeout(update, 50); })
                .observe(main, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
        }
    } catch (e) {}
    setTimeout(update, 2300); // setelah skeleton (2 dtk) berganti jadi isi
    update();
})();
</script>