@extends('frontend.layouts.app')

@section('content')

    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            <div class="profile">
                <div class="profile__header">
                    <div class="profile__header-title">Welcome,
                        <span class="g8-name">{{ Auth::user()->username }}</span>
                    </div>
                </div>
            </div>
            
            <div class="funds">
                <div class="funds__header">
                    <div class="funds__header-left">
                        <span>Saldo</span>
                        <div class="header-balance" style="display: flex; align-items: center; gap: 8px;">
                            <strong class="g8-bal-total">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</strong>
                            <a href="javascript:void(0);" class="btn-refresh-balance" style="color: #f99c2a; cursor: pointer; font-size: 14px;" title="Refresh Saldo">
                                <i class="fas fa-sync-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="funds__header-right"></div>
                </div>
                
                <div class="funds__rebate-detail">
                    <div class="rebate-item">
                        <div class="rebate-item__detail bonusMob">
                            
                            @forelse($bonus_active as $index => $b)
                                <div class="rebate-item__detail-box">
                                    <div class="box-header adt2" style="cursor: pointer;">
                                        <span>{{ $index + 1 }}. {{ $b->bonus_title }}</span>
                                        <div class="chevron arrow"><i class="fas fa-chevron-down"></i></div>
                                    </div>
                                    <div class="box-content" style="display: none;">
                                        <ul>
                                            <li><span>Date</span>&nbsp;<span>{{ date('Y-m-d', strtotime($b->created_at)) }}</span></li>
                                            <li><span>Bonus Amt</span>&nbsp;<span>IDR {{ number_format((float)$b->bonus_amount, 0, ',', '.') }}</span></li>
                                            <li><span>Target TO</span>&nbsp;<span>IDR {{ number_format((float)$b->turn_over, 0, ',', '.') }}</span></li>
                                            
                                            {{-- TAMBAHAN PROGRESS BAR MOBILE --}}
                                            <li style="display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; border-top: 1px dashed #444; padding-top: 10px;">
                                                <div style="width: 100%; display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
                                                    <span>Progress TO</span>
                                                    <span style="color: #f99c2a; font-weight: bold;">IDR {{ number_format((float)$b->current_to, 0, ',', '.') }}</span>
                                                </div>
                                                <div style="width: 100%; background-color: #333; border-radius: 5px; overflow: hidden; height: 8px;">
                                                    <div style="width: {{ $b->percentage }}%; background-color: {{ $b->percentage >= 100 ? '#28a745' : '#f99c2a' }}; height: 100%; transition: width 0.5s ease;"></div>
                                                </div>
                                                <div style="width: 100%; text-align: right; font-size: 11px; margin-top: 3px; color: #ccc;">{{ $b->percentage }}%</div>
                                            </li>
                                    
                                            <li>
                                                <span>Status</span>&nbsp;
                                                <span>
                                                    @if($b->status == 1)
                                                        <span style="color: #28a745; font-weight: bold;">Selesai</span>
                                                    @elseif($b->status == 2)
                                                        <span style="color: #dc3545; font-weight: bold;">Dibatalkan</span>
                                                    @else
                                                        @if($b->percentage >= 100)
                                                            <button class="btn-claim-bonus" data-id="{{ $b->id }}" style="background: #28a745; color: #fff; border: none; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; animation: pulse 1.5s infinite;">
                                                                <i class="fas fa-unlock"></i> Klaim
                                                            </button>
                                                        @else
                                                            <span style="color: #fbb11a; font-weight: bold;">Sedang Berjalan</span>
                                                        @endif
                                                    @endif
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            @empty
                                <div style="padding: 20px; text-align: center;">Belum ada bonus atau promo yang sedang aktif.</div>
                            @endforelse

                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('frontend.partials.mobile.bottom-nav')
    </div>
    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="profile">
            <div class="wrapper">
                <div class="profile__nav">
                    <ul>
                        <li><a href="/secure/admin/profile"><i class="far fa-user"></i><span>Profile</span></a></li>
                        <li><a href="/secure/admin/deposit"><i class="fas fa-wallet"></i><span>Deposit</span></a></li>
                        <li><a href="/secure/admin/withdrawal"><i class="fas fa-money-bill"></i><span>Withdrawal</span></a></li>
                        <li class="active"><a href="/secure/admin/bonus"><i class="fas fa-dollar-sign"></i><span>Bonus</span></a></li>
                        <li><a href="/secure/admin/history"><i class="fas fa-history"></i><span>History</span></a></li>
                        <li><a href="/secure/admin/referral"><i class="fas fa-users"></i><span>Referral</span></a></li>
                        <li>
                            <a href="/secure/admin/messages"><i class="fas fa-envelope"></i><span>Messages</span></a>
                            <div class="notif-wrapper hide"><div class="notif-info notanim"></div></div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <div class="wrapper">
            <section class="balance">
                <div class="g8-bal-top"><p>Saldo</p>
                    <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <span class="g8-bal-total">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</span>
                        <a href="javascript:void(0);" class="btn-refresh-balance" style="color: #000; cursor: pointer; font-size: 16px;" title="Refresh Saldo">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                    </div>
                </div>
            </section>

            <section class="funds">
                <div class="funds__container">
                    <div class="funds__rebate">
                        <section class="funds__rebate-table">
                            <table class="table table-condensed table-styled bonusHis" cellpadding="0" cellspacing="0" style="width: 100%;">
                                <thead style="color: #fff;">
                                    <tr>
                                        <th>No</th>
                                        <th>Date</th>
                                        <th>Promotion</th>
                                        <th>Target TurnOver</th>
                                        <th>Bonus Amount</th>
                                        <th width="20%">Progress TO</th> {{-- KOLOM BARU --}}
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($bonus_active as $index => $b)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ date('Y-m-d H:i', strtotime($b->created_at)) }}</td>
                                            <td>{{ $b->bonus_title }}</td>
                                            <td>IDR {{ number_format((float)$b->turn_over, 0, ',', '.') }}</td>
                                            <td>IDR {{ number_format((float)$b->bonus_amount, 0, ',', '.') }}</td>
                                            
                                            {{-- TAMBAHAN PROGRESS BAR DESKTOP --}}
                                            <td>
                                                <div style="font-size: 11px; margin-bottom: 3px; color: #f99c2a; font-weight: bold;">
                                                    IDR {{ number_format((float)$b->current_to, 0, ',', '.') }}
                                                </div>
                                                <div style="width: 100%; background-color: #333; border-radius: 5px; overflow: hidden; height: 8px;">
                                                    <div style="width: {{ $b->percentage }}%; background-color: {{ $b->percentage >= 100 ? '#28a745' : '#f99c2a' }}; height: 100%; transition: width 0.5s ease;"></div>
                                                </div>
                                                <div style="text-align: right; font-size: 11px; margin-top: 3px; color: #ccc;">{{ $b->percentage }}%</div>
                                            </td>
                                
                                            <td class="text-center">
                                                @if($b->status == 1)
                                                    <span class="badge" style="background: #28a745; padding: 5px 10px; border-radius: 5px; color: #fff;">Selesai</span>
                                                @else
                                                    @if($b->percentage >= 100)
                                                        {{-- Tombol Muncul Jika TO >= 100% --}}
                                                        <button class="btn btn-sm btn-success btn-claim-bonus" data-id="{{ $b->id }}" style="font-size: 11px; font-weight: bold; animation: pulse 1.5s infinite;">
                                                            <i class="fas fa-unlock"></i> Selesaikan Bonus
                                                        </button>
                                                    @else
                                                        <span class="badge" style="background: #fbb11a; padding: 5px 10px; border-radius: 5px; color: #000;">Sedang Berjalan</span>
                                                    @endif
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" style="text-align: center; padding: 20px;">Belum ada bonus atau promo yang sedang aktif.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </section>
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.desktop.footer')
    </div>

@endsection

@push('scripts')
<script type="text/javascript">
// Gunakan loadMeIfReady agar sinkron dengan urutan script bawaan template
window.loadMeIfReady = function() {

    // 1. REFRESH SALDO AJAX
    $('.btn-refresh-balance').on('click', function(e) {
        e.preventDefault();
        let $icons = $('.btn-refresh-balance i'); 
        let $balanceSpans = $('.g8-bal-total');

        $icons.addClass('fa-spin'); // Mulai animasi berputar
        
        $.ajax({
            url: "{{ route('api.balance') }}", 
            type: "GET",
            success: function(response) {
                $icons.removeClass('fa-spin'); // Matikan animasi
                if (response && response.d) {
                    $balanceSpans.html(response.d); // Update nominal
                }
            },
            error: function() {
                $icons.removeClass('fa-spin');
            }
        });
    });

    // 2. TOGGLE DROPDOWN MOBILE (HASIL ADAPTASI DARI HISTORY)
    $(document).off('click', '.box-header.adt2').on('click', '.box-header.adt2', function(e) {
        e.preventDefault();
        
        // JURUS PAMUNGKAS: Blokir script main.js bawaan template!
        e.stopImmediatePropagation(); 

        let $content = $(this).next('.box-content');
        let $icon = $(this).find('.fa-chevron-down, .fa-chevron-up');
        
        // Mencegah animasi menumpuk kalau diklik berulang-ulang
        if ($content.is(':animated')) return; 

        // Toggle animasi dengan durasi yang lebih smooth
        $content.slideToggle(250);
        
        if($icon.hasClass('fa-chevron-down')) {
            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
        } else {
            $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
        }
    });
    
    // 3. FITUR SELESAIKAN BONUS (KLIK TOMBOL KLAIM)
    $(document).on('click', '.btn-claim-bonus', function(e) {
        e.preventDefault();
        
        // Mencegah tombol memicu dropdown tertutup saat diklik (karena tombol ada di dalam box)
        e.stopPropagation(); 
        
        let $btn = $(this);
        let bonusId = $btn.attr('data-id');
        let originalText = $btn.html();

        jConfirm('Anda yakin ingin menyelesaikan promo ini? Pastikan Anda sedang tidak berada di dalam permainan.', 'Selesaikan Promo', function(r) {
            if (r) {
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Loading...');
                
                $.ajax({
                    url: "{{ url('/secure/admin/bonus/complete') }}/" + bonusId, 
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}" 
                    },
                    success: function(response) {
                        if (response.success) {
                            jAlert(response.message, 'Sukses', function() {
                                window.location.reload(); 
                            });
                        } else {
                            jAlert(response.message, 'Gagal', function() {
                                $btn.prop('disabled', false).html(originalText);
                            });
                        }
                    },
                    error: function() {
                        jAlert('Koneksi terputus. Silakan coba beberapa saat lagi.', 'Error', function() {
                            $btn.prop('disabled', false).html(originalText);
                        });
                    }
                });
            }
        });
    });

    // 4. ANIMASI CSS UNTUK TOMBOL (Pulse Effect)
    if ($('style#pulse-anim').length === 0) {
        $('head').append(`
            <style id="pulse-anim">
                @keyframes pulse {
                    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
                    50% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(40, 167, 69, 0); }
                    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
                }
            </style>
        `);
    }

}; // END OF loadMeIfReady
</script>
@endpush