@extends('frontend.layouts.app')
@push('styles')
<link rel="stylesheet" href="/css/ref.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" type="text/css">
@endpush
@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__container">
                    <div class="funds__container-section referral">
                        <div class="refib-l">
                            <img class="qr qr-ref-m" src="" width="120" height="120" alt="QR Code">
                        </div>
                        <div class="ref-counter">
                            <h3><span class="total-ref-dl">{{ $totalReferral }}</span> Total Downline</h3>
                            <h3><span class="total-ref-inc">IDR {{ number_format($totalAllBonus, 0, ',', '.') }}</span> Total Pendapatan</h3>
                        </div>
                        <div class="ref-info ref-link">
                            <p>Referral Code:</p>
                            <p class="the-link"><span class="refLinkCode">{{ $refCode }}</span><i class="fas fa-copy copyBtn" data-clipboard-text="{{ $refCode }}"></i></p>
                            <p>Referral Link:</p>
                            <p class="the-link"><span class="refLink refLinkUrl">{{ $refLink }}</span></p>
                            <button type="button" class="button button-sm button--yellow copyBtn" data-clipboard-text="{{ $refLink }}">Copy Link</button>
                        </div>
                        
                        <h3>Referral Details</h3>
                        
                        <div id="ajax-container-m">
                            <form method="GET" action="{{ url()->current() }}" class="filterForm">
                                <div class="drp-wrap form-group">
                                    <div class="drp daterange-btn">
                                        <i class="fa fa-calendar"></i>
                                        <span class="daterange-text">{{ $startDateFmt }} &mdash; {{ $endDateFmt }}</span>
                                        <i class="fa fa-caret-down"></i>
                                        <input type="hidden" name="start_date" class="start_date" value="{{ date('Y-m-d', strtotime($startDateFmt)) }}">
                                        <input type="hidden" name="end_date" class="end_date" value="{{ date('Y-m-d', strtotime($endDateFmt)) }}">
                                    </div>
                                    <button type="submit" class="button button-sm button--yellow btn-submit-filter">Submit</button>
                                </div>
                            </form>

                            <div class="ref-dbox nopad">
                                <h3>Referral Incentive Summary</h3>
                                <div class="ref-dbox-data">
                                    @forelse($bonusData as $index => $b)
                                        <div class="dd">
                                            <div class="ddt">
                                                <div class="dd1">{{ $index + 1 }}. {{ $b['username'] }}</div>
                                                <div class="dd2">IDR {{ number_format($b['jumlah'], 0, ',', '.') }}</div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="dd no" style="background: #fff !important;">No data</div>
                                    @endforelse
                                </div>

                                <h3>Referral List</h3>
                                <table class="referralTable referral-list display compact nowrap" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Username</th>
                                            <th>Turnover</th>
                                            <th>Win/Lose</th>
                                            <th>Register Date</th>
                                            <th>Last Login</th>
                                            <th>First Depo Date</th>
                                            <th>Last Depo Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($downlineData as $index => $d)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $d->username }}</td>
                                            <td>{{ number_format($d->turnover, 0, ',', '.') }}</td>
                                            <td>{{ number_format($d->winlose, 0, ',', '.') }}</td>
                                            <td>{{ $d->register_date ? date('M d, Y h:i:s A', strtotime($d->register_date)) : '-' }}</td>
                                            <td>{{ $d->last_login ? date('M d, Y h:i:s A', strtotime($d->last_login)) : '-' }}</td>
                                            <td>{{ $d->first_depo ? date('M d, Y h:i:s A', strtotime($d->first_depo)) : '-' }}</td>
                                            <td>{{ $d->last_depo ? date('M d, Y h:i:s A', strtotime($d->last_depo)) : '-' }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </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><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 class="active"><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>
                    <span class="g8-bal-total">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</span>
                    <a href="javascript:void(0);" class="btn-refresh-balance" style="margin-left: 10px; cursor: pointer; color: #000;">
                        <i class="fas fa-sync-alt"></i>
                    </a>
                </div>
            </section>

            <section class="funds">
                <div class="funds__detail referral">
                    <div class="funds__detail-left">
                        <div class="ref-info">
                            <div class="refib-l">
                                <img class="qr qr-ref-d" src="" width="120" height="120" alt="QR Code">
                            </div>
                            <h3><span class="total-ref-dl">{{ $totalReferral }}</span> Total Downline</h3>
                            <h3><span class="total-ref-inc">IDR {{ number_format($totalAllBonus, 0, ',', '.') }}</span> Total Pendapatan</h3>
                        </div>
                        <div class="ref-info ref-link">
                            <p>Referral Code:</p>
                            <p class="the-link"><span class="refLinkCode">{{ $refCode }}</span><i class="fas fa-copy copyBtn" data-clipboard-text="{{ $refCode }}"></i></p>
                            <p>Referral Link:</p>
                            <p class="the-link"><span class="refLink refLinkUrl">{{ $refLink }}</span></p>
                            <button type="button" class="button button-sm button--yellow copyBtn" data-clipboard-text="{{ $refLink }}">Copy Link</button>
                        </div>
                    </div>

                    <div class="funds__detail-right">
                        <div class="detail-box">
                            <div class="form-detail form-detail--full"><label class="field-title">Referral Details</label>
                                <hr>
                            </div>
                            
                            <div id="ajax-container-d">
                                <form method="GET" action="{{ url()->current() }}" class="filterForm">
                                    <div class="drp-wrap">
                                        <div class="drp daterange-btn">
                                            <i class="fa fa-calendar"></i>
                                            <span class="daterange-text">{{ $startDateFmt }} &mdash; {{ $endDateFmt }}</span>
                                            <i class="fa fa-caret-down"></i>
                                            <input type="hidden" name="start_date" class="start_date" value="{{ date('Y-m-d', strtotime($startDateFmt)) }}">
                                            <input type="hidden" name="end_date" class="end_date" value="{{ date('Y-m-d', strtotime($endDateFmt)) }}">
                                        </div>
                                        <button type="submit" class="button button-sm button--yellow btn-submit-filter">Submit</button>
                                    </div>
                                </form>

                                <div class="ref-dbox nopad">
                                    <h3>Referral Incentive Summary</h3>
                                    <div class="ref-dbox-data">
                                        @forelse($bonusData as $index => $b)
                                            <div class="dd">
                                                <div class="ddt">
                                                    <div class="dd1">{{ $index + 1 }}. {{ $b['username'] }}</div>
                                                    <div class="dd2">IDR {{ number_format($b['jumlah'], 0, ',', '.') }}</div>
                                                </div>
                                            </div>
                                        @empty
                                            <div class="dd no" style="background: #fff !important;">No data</div>
                                        @endforelse
                                    </div>

                                    <h3>Referral List</h3>
                                    <table class="referralTable referral-list display compact nowrap" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>Username</th>
                                                <th>Turnover</th>
                                                <th>Win/Lose</th>
                                                <th>Register Date</th>
                                                <th>Last Login</th>
                                                <th>First Depo Date</th>
                                                <th>Last Depo Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($downlineData as $index => $d)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $d->username }}</td>
                                                <td>{{ number_format($d->turnover, 0, ',', '.') }}</td>
                                                <td>{{ number_format($d->winlose, 0, ',', '.') }}</td>
                                                <td>{{ $d->register_date ? date('M d, Y h:i:s A', strtotime($d->register_date)) : '-' }}</td>
                                                <td>{{ $d->last_login ? date('M d, Y h:i:s A', strtotime($d->last_login)) : '-' }}</td>
                                                <td>{{ $d->first_depo ? date('M d, Y h:i:s A', strtotime($d->first_depo)) : '-' }}</td>
                                                <td>{{ $d->last_depo ? date('M d, Y h:i:s A', strtotime($d->last_depo)) : '-' }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.desktop.footer')
    </div>
@endsection

@push('scripts')
<script src="{{ asset('js/qrious.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
$(document).ready(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');
        
        $.ajax({
            url: "{{ route('api.balance') }}", 
            type: "GET",
            success: function(response) {
                $icons.removeClass('fa-spin');
                if (response && response.d) {
                    $balanceSpans.html(response.d);
                }
            },
            error: function() {
                $icons.removeClass('fa-spin');
            }
        });
    });

    // 2. FUNGSI COPY LINK
    $('.copyBtn, .fa-copy').on('click', function(e) {
        e.preventDefault();
        let link = $(this).attr('data-clipboard-text');
        if(!link) return;
        
        let tempInput = $("<input>");
        $("body").append(tempInput);
        tempInput.val(link).select();
        document.execCommand("copy");
        tempInput.remove();
        jAlert('Berhasil Disalin!', 'Sukses');
    });

    // 3. GENERATE QR CODE
    let refLink = $('.refLinkUrl').first().text().trim();
    if(refLink) {
        new QRious({ element: document.querySelector('.qr-ref-m'), size: 120, value: refLink });
        new QRious({ element: document.querySelector('.qr-ref-d'), size: 120, value: refLink });
    }

    // 4. INIT PLUGIN (Daterangepicker & DataTables)
    function initPlugins() {
        // Daterangepicker
        $('.daterange-btn').daterangepicker({
            ranges: {
               'Hari ini': [moment(), moment()],
               'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
               'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
               'Custom Range': [moment().subtract(29, 'days'), moment()]
            },
            locale: { format: 'DD-MM-YYYY' }
        }, function(start, end, label) {
            let $parent = this.element.closest('.drp-wrap');
            $parent.find('.daterange-text').html(start.format('DD-MM-YYYY') + ' &mdash; ' + end.format('DD-MM-YYYY'));
            $parent.find('.start_date').val(start.format('YYYY-MM-DD'));
            $parent.find('.end_date').val(end.format('YYYY-MM-DD'));
        });

        // DataTables menggunakan struktur template asli
        $('.referralTable').DataTable({
            dom: '<"dtblengh"l>rtip',
            lengthMenu: [10, 25, 50, 100],
            scrollX: true,
            ordering: false,
            destroy: true // wajib jika diload ulang via AJAX
        });
    }

    initPlugins();

    // 5. AJAX FILTER (Tanpa Reload HTML)
    $(document).on('submit', '.filterForm', function(e) {
        e.preventDefault();
        
        let $form = $(this);
        let $btn = $form.find('.btn-submit-filter');
        let originalText = $btn.html();
        
        $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop('disabled', true);

        $.ajax({
            url: $form.attr('action'),
            data: $form.serialize(),
            type: 'GET',
            success: function(response) {
                let parser = new DOMParser();
                let doc = parser.parseFromString(response, "text/html");

                $('.total-ref-dl').html($(doc).find('.total-ref-dl').first().html());
                $('.total-ref-inc').html($(doc).find('.total-ref-inc').first().html());

                $('#ajax-container-d').html($(doc).find('#ajax-container-d').html());
                $('#ajax-container-m').html($(doc).find('#ajax-container-m').html());

                initPlugins(); // Re-init kalender dan tabel
            },
            error: function() {
                jAlert('Gagal memuat data. Silakan coba lagi.', 'Error');
                $btn.html(originalText).prop('disabled', false);
            }
        });
    });

});
</script>
@endpush