<div class="g8app-mob" style="display: none; background-color: #111; height: 60px; width: 100%; position: fixed; top: 0; z-index: 9998; border-bottom: 1px solid #222;">
    <div class="l g8app-mob-close" style="width: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
        <div class="wrapper-close" style="background: #424242; color: #fff; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 16px; font-weight: bold;">×</div>
    </div>
    
    <div class="c" style="flex: 1; display: flex; align-items: center; padding-left: 5px;">
        <div class="cl">
            <img src="{{ asset('uploads/'.general()->icon_web) }}" style="height: 38px; width: auto;" alt="Apps Logo" loading="lazy" onerror="this.src='https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/download-apps-small.png'">
        </div>
        <div class="cr">
            <h3>{{ general()->brand ?? 'Mantra88' }}</h3>
            <p>Download Aplikasi Mobile</p>
        </div>
    </div>
    
    <div class="r" style="width: 65px; background-color: #ffcc00; display: flex; align-items: center; justify-content: center; cursor: pointer;">
        <a href="https://www.tsduvaay.store/d.html?a=mtr" data-apkpath="/d.html?a=mtr" aria-label="Download APK" target="_blank" style="display: block; text-align: center;">
            <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/download-apps-small.png" style="width: 32px; height: auto; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));" alt="Download" loading="lazy" class="icon-download">
        </a>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // 1. Cek apakah banner app sudah pernah ditutup di sesi ini
        let hasSeenAppBanner = sessionStorage.getItem('mantra_app_banner_seen');

        // 2. Jika belum pernah ditutup, tampilkan banner
        if (!hasSeenAppBanner) {
            // Trik jQuery: Set ke flex dulu, lalu sembunyikan, baru dianimasikan slideDown
            // Ini agar tampilan flexbox (sejajar) tidak rusak menjadi block
            $('.g8app-mob').css('display', 'flex').hide().slideDown(250);
        } else {
            // Jika sudah ditutup sebelumnya, pastikan class 'wt' (padding top) dihapus
            $('#showM').removeClass('wt');
        }

        // 3. Fungsi ketika tombol silang (X) diklik
        $(document).on('click', '.g8app-mob-close', function() {
            $('.g8app-mob').slideUp(250); 
            $('#showM').removeClass('wt'); 
            
            // Simpan ke session storage agar tidak muncul lagi saat pindah halaman
            sessionStorage.setItem('mantra_app_banner_seen', 'true');
        });
    });
</script>
@endpush