@extends('layouts.app')
@section('content')
    <div class="container">
    @include('desktop.partials.runningtext')
    @include('desktop.partials.breadcrumb')
<section data-v-44d1efd8="" class="referral-user referral-user--d">
    <header data-v-44d1efd8="" class="page-header"><i data-v-0e010622="" data-v-44d1efd8="" class="icon-referral icon--2x"></i>
        <h3 data-v-44d1efd8="">Referral</h3>
    </header>
    <div class="referral-user__message">
                <p><strong><big>Selamat datang pada halaman referral anda!</big></strong></p>
                <p>&nbsp;</p>
                <p><big>Halaman ini berisikan link referral dan kode referral yang dapat anda bagikan.</big></p>
                <p>&nbsp;</p>
                <p><big>Anda dapat melihat riwayat bonus referral dan downline di halaman ini.</big></p>
            </div>

            <div class="referral-user__links">

                {{-- ================= REF ID ================= --}}
                <div class="referral-user__detail referral-user__id">
                    <label>ID Referral Anda</label>
                    <div id="referral-id">
                        <span>{{ $refCode }}</span>
                    </div>
                    <button class="btn btn--brand copy-btn" data-copy="{{ $refCode }}">Copy</button>
                </div>

                {{-- ================= REF LINK ================= --}}
                <div class="referral-user__detail referral-user__link">
                    <label>Link Referral Anda</label>
                    <div id="referral-link">
                        <span>{{ $refLink }}</span>
                    </div>
                    <button class="btn btn--brand copy-btn" data-copy="{{ $refLink }}">Copy</button>
                </div>
				<div data-v-44d1efd8="" class="referral-user__how"><a data-v-44d1efd8="" href="/referral" class="btn btn--flex btn--accent-secondary">
			        Klik disini untuk cara bergabung
			      </a>
    			</div>
                {{-- ================= SHARE ================= --}}
                <div class="referral-user__detail referral-user__share">
                    <label>Bagikan link anda</label>

                    <ul class="referral-user__social">
                        <li>
                            <a href="https://www.facebook.com/sharer.php?u={{ urlencode($refLink) }}" target="_blank">
                                <img src="https://cdn-proxy.globalcontentcloud.com/common/default/social/facebook.svg">
                            </a>
                        </li>

                        <li>
                            <a href="https://twitter.com/share?url={{ urlencode($refLink) }}" target="_blank">
                                <img src="https://cdn-proxy.globalcontentcloud.com/common/default/social/twitter.svg">
                            </a>
                        </li>

                        <li>
                            <a href="https://api.whatsapp.com/send?text={{ urlencode($refLink) }}" target="_blank">
                                <img src="https://cdn-proxy.globalcontentcloud.com/common/default/social/whatsapp.svg">
                            </a>
                        </li>

                        <li>
                            <a href="https://telegram.me/share/url?url={{ urlencode($refLink) }}" target="_blank">
                                <img src="https://cdn-proxy.globalcontentcloud.com/common/default/social/telegram.svg">
                            </a>
                        </li>
                    </ul>
                </div>
                {{-- ================= BONUS ================= --}}
                <div class="referral-user__detail referral-user__bonus">
                    <label>Komisi Bonus Referral</label>
                    <ul class="referral-user__bonus-detail">
                        <li><label>Casino</label><span>Hingga 3.00%</span></li>
                        <li><label>Sports+</label><span>Hingga 1.00%</span></li>
                        <li><label>Slots</label><span>Hingga 3.00%</span></li>
                        <li><label>Arcade</label><span>Hingga 3.00%</span></li>
                        <li><label>Poker</label><span>Hingga 2.00%</span></li>
                    </ul>
                </div>
            </div>
            {{-- ================= TABS ================= --}}
			<div data-v-44d1efd8="" class="referral-user__tabs">
			    <ul data-v-44d1efd8="">
			        <li data-v-44d1efd8="">
			        	<a data-v-44d1efd8="" href="{{ route('user.referral.history') }}" class="btn btn--flex btn--light {{ $tab == 'history' ? 'app-link--active' : '' }}">
			                History
			            </a>
			         </li>
			        <li data-v-44d1efd8="">
			        	<a data-v-44d1efd8="" href="{{ route('user.referral.downline') }}" class="btn btn--flex btn--light {{ $tab == 'downline' ? 'app-link--active' : '' }}">
			                Downline
			            </a>
			         </li>
			        <li data-v-44d1efd8="">
			        	<a data-v-44d1efd8="" href="{{ route('user.referral.rules') }}" class="btn btn--flex btn--light {{ $tab == 'rules' ? 'app-link--active' : '' }}">
			                Ketentuan
			            </a>
			         </li>
			    </ul>
			    @if($tab == 'history')
			    <section data-v-bd73e202="" data-v-44d1efd8="" class="referral-history">
			        <div data-v-bd73e202="" class="alert alert--info"><i data-v-0e010622="" class="icon-info icon--lg"></i>
			            <p>Saat ini belum ada aktivitas Referral History pada akun anda.</p>
			        </div>
			    </section>
			    @endif
			    @if($tab == 'downline')

			<section data-v-9d0a84e8="" data-v-44d1efd8="" class="referral-downline">
			
			    <h5 data-v-9d0a84e8="" class="referral-downline__total">
			        Jumlah downline: {{ $downline->total() }}
			    </h5>
			
			    <div data-v-9d0a84e8="" class="referral-downline__data">
			
			        <header data-v-9d0a84e8="">
			            <h6 data-v-9d0a84e8="">Nama</h6>
			            <h6 data-v-9d0a84e8="">Username</h6>
			            <h6 data-v-9d0a84e8="">Waktu Registrasi</h6>
			        </header>
			
			        <ul data-v-9d0a84e8="">
			
			            @forelse($downline as $d)
			
			            <li data-v-9d0a84e8="">
			                <span data-v-9d0a84e8="">
			                    {{ $d->fullname ?? '-' }}
			                </span>
			
			                <span data-v-9d0a84e8="">
			                    {{ $d->username }}
			                </span>
			
			                <span data-v-9d0a84e8="">
			                    {{ date('d/m/Y, H:i', strtotime($d->created_at)) }}
			                </span>
			            </li>
			
			            @empty
			
			            <li data-v-9d0a84e8="">
			                <span data-v-9d0a84e8="">-</span>
			                <span data-v-9d0a84e8="">Tidak ada data</span>
			                <span data-v-9d0a84e8="">-</span>
			            </li>
			
			            @endforelse
			
			        </ul>
			
			    </div>
			
			    {{-- ================= PAGINATION ================= --}}
			    <div data-v-e2783662="" data-v-9d0a84e8="" class="pagination">
			        {{ $downline->links() }}
			    </div>
			
			</section>
			
			@endif
			@if($tab == 'rules')
			<section data-v-4af054c0="" data-v-44d1efd8="" class="referral-rules">
			    <h2>Ketentuan Referral</h2>
			
			    <p><big>Bonus referral akan dibagikan secara mingguan. Anda akan mendapatkan bonus referral anda setiap hari senin untuk transaksi dari minggu sebelumnya. Anda juga dapat melihat riwayat bonus referral anda dari minggu-minggu sebelumnya pada menu History</big></p>
			
			    <p>&nbsp;</p>
			
			    <p><big>Silahkan hubungi Customer Service kami jika anda memiliki pertanyaan lebih lanjut mengenai sistem referral. Terima kasih dan selamat bergabung!</big></p>
			</section>
			@endif
			</div>
        </section>
    </div>
    <script>
	document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.copy-btn').forEach(btn => {

        btn.addEventListener('click', function () {

            const text = this.dataset.copy;

            navigator.clipboard.writeText(text).then(() => {

                showToast('success', 'Link referral berhasil disalin');

            }).catch(() => {

                showToast('error', 'Gagal menyalin');

            });

        });

    });

});
</script>
@endsection