<?php $__env->startSection('content'); ?>
<div class="master-main mainContent mobile maincontent-design2 middlebackground background-design5">
    <div class="container">
        <div class="row multi">
            <div class="hidden"></div>
            
            <div class="col-xs-12 col-single tabbed main-content">
                <div class="content-inner-container referral-bonus-content">
                    
                    
                    <div class="btn-group-md">
                        <button type="button" class="btn btn-default alignbtn" onclick="clickTab('<?php echo e(url('/mobile/account/referral')); ?>')">Daftar Anggota Referral</button>
                        <button type="button" class="btn btn-default alignbtn" onclick="clickTab('<?php echo e(url('/mobile/account/referralmember')); ?>')">Anggota Referral</button>
                        <button type="button" class="btn btn-default alignbtn active">Bonus Referral</button>
                    </div>
                    
                    <h2 class="main-content-page-title">Bonus Referral</h2>

                    
                    <div class="well" style="text-align: center; padding: 15px; margin-bottom: 20px;">
                        <h4 style="margin: 0; color: #f3c300; font-size: 14px;">Total Estimasi Bonus Anda:</h4>
                        <h2 style="margin: 10px 0 0 0; color: #28a745; font-weight: bold; font-size: 24px;">
                            Rp <?php echo e(number_format($totalAllBonus ?? 0, 0, ',', '.')); ?>

                        </h2>
                    </div>

                    
                    <div class="table-responsive">
                        <table class="table table-bordered resulttable" style="font-size: 12px;">
                            <thead>
                                <tr class="table-header-st">
                                    <th style="text-align: center; width: 10%;">No</th>
                                    <th style="text-align: center;">Anggota</th>
                                    <th style="text-align: center;">Tanggal</th>
                                    <th style="text-align: center;">Bonus (10%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__empty_1 = true; $__currentLoopData = $bonusData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $bonus): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <tr>
                                        <td style="text-align: center;"><?php echo e($index + 1); ?></td>
                                        <td style="text-align: center;"><?php echo e($bonus['username']); ?></td>
                                        <td style="text-align: center;"><?php echo e(date('d-m-Y', strtotime($bonus['tanggal']))); ?></td>
                                        <td style="text-align: right; color: #28a745; font-weight: bold;">
                                            Rp <?php echo e(number_format($bonus['jumlah'], 0, ',', '.')); ?>

                                        </td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <tr>
                                        <td colspan="4" style="text-align: center; padding: 20px; color: #aaa;">
                                            Belum ada data bonus referral. Kumpulkan lebih banyak anggota untuk mendapatkan bonus!
                                        </td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('script'); ?>
<script>
    // ==========================================
    // FUNGSI NAVIGASI TAB & MOBILE SLIDER
    // ==========================================
    var isClickTab = false;
    function clickTab(tab) {
        if (isClickTab) return;
        isClickTab = true;
        setTimeout(function () { isClickTab = false }, 3000);
        location.href = tab;
    }

    // Mengaktifkan fitur geser tab khusus mobile (agar UX rapi)
    $(function () {
        var navContainerEl = $('.tabbed .nav-container');
        showSlideIndicator(true, navContainerEl);
        
        $('.tabbed .nav-container').on('scroll', function (e) {
            if ($(this).find('.slide-indicator').hasClass('start')) showSlideIndicator(false, navContainerEl);
        });
        
        var settingSeq = "Account_Referral,Account_ReferralMember,Account_ReferralBonus";
        var arrSeq = (settingSeq !== "") ? settingSeq.split(",") : [];
        if (arrSeq.length > 0) {
            arrSeq.forEach(function (element, index) {
                if (element !== "" && element !== null && typeof element !== "undefined") {
                    navContainerEl.find('#' + element).css("order", index);
                }
            });
        }
        
        showOOBEl(navContainerEl.find("button.active"), navContainerEl);
        updateIndicatorWidth();
        $(window).on("resize", updateIndicatorWidth);
    });

    function showSlideIndicator(isShow, element) {
        if (isShow == "" || isShow == null || typeof isShow == undefined) isShow = false;
        var slideIndicatorEl = "";
        var slideIndicatorContainer = "<div class=\"slide-indicator stop\"><span class=\"glyphicon glyphicon-chevron-right\" ></span><span class=\"glyphicon glyphicon-chevron-right\" style=\"left: -10px;\"></span></div>";
        if (element.find('.slide-indicator').length == 0) element.append(slideIndicatorContainer);
        slideIndicatorEl = element.find('.slide-indicator');
        var navContainerLastButtonEl = element.find('button').last();
        if (slideIndicatorEl && slideIndicatorEl.length > 0) {
            if (isShow) {
                if (navContainerLastButtonEl && typeof navContainerLastButtonEl === "object" && navContainerLastButtonEl.length > 0) {
                    const rect = navContainerLastButtonEl[0].getBoundingClientRect();
                    if (rect.right > window.innerWidth) {
                        slideIndicatorEl.show();
                        slideIndicatorEl.addClass('start').removeClass('stop');
                        slideIndicatorEl.css('animation-play-state', 'running');
                    }
                }
            } else {
                slideIndicatorEl.hide();
                slideIndicatorEl.removeClass('start').addClass('stop');
                slideIndicatorEl.css('animation-play-state', 'paused');
            }
        }
    }

    function showOOBEl(el, elContainer) {
        if (el && el.length > 0 && elContainer && elContainer.length > 0) {
            let containerRect = elContainer[0].getBoundingClientRect();
            let activeButtonRect = el[0].getBoundingClientRect();
            if (activeButtonRect.right > containerRect.right) elContainer.scrollLeft(elContainer.scrollLeft() + (activeButtonRect.right - containerRect.left));
        }
    }

    function updateIndicatorWidth() {
        let navContainer = $(".tabbed .nav-container");
        if (navContainer.length) {
            if ($("#nav-bottom-border").length === 0) {
                $("<style id='nav-bottom-border'>.tabbed .nav-container::after { width: " + navContainer[0].scrollWidth + "px; }</style>").appendTo("head");
            }
        }
    }
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('frontend.mobile.pages.account.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /www/wwwroot/website/sewa/dragon158/resources/views/frontend/mobile/pages/account/pages/referralbonus.blade.php ENDPATH**/ ?>