@extends('layout.mobile.main')
@section('mobile')
    <style>
        .referral-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .referral-table thead {
            background-color: #4CAF50;
            /* Warna header tabel */
            color: white;
        }

        .referral-table th,
        .referral-table td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #ddd;

        }

        .referral-table th {
            font-weight: bold;
            font-size: 16px;
        }

        .referral-table td {
            font-size: 14px;
            color: #333;
            background-color: #f1f1f1;

        }



        .referral-table tr:nth-child(even) {
            background-color: #f2f2f2;
            /* Warna latar baris genap */
        }



        /* Responsive styling untuk layar yang lebih kecil */
        @media screen and (max-width: 600px) {
            .referral-table thead {
                display: none;
            }

            .referral-table,
            .referral-table tbody,
            .referral-table tr,
            .referral-table td {
                display: block;
                width: 100%;
            }

            .referral-table tr {
                margin-bottom: 15px;
                border-bottom: 2px solid #ddd;
            }

            .referral-table td {
                text-align: right;
                padding-left: 50%;
                position: relative;
            }

            .referral-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 15px;
                font-weight: bold;
                text-align: left;
            }
        }
    </style>
    @if (Auth::check())
        <main>
            <div class="container"><!----> <!---->
                <section class="referral-user" data-v-44d1efd8="">
                    <header class="page-header" data-v-44d1efd8=""><i class="fas fa-share fa-lg" data-v-0e010622=""
                            data-v-44d1efd8=""></i>
                        <h3 data-v-44d1efd8="">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">Referral</font>
                            </font>
                        </h3>
                    </header> <!---->
                    <div class="referral-user__links" data-v-44d1efd8="">
                        <div class="referral-user__detail referral-user__id" data-v-44d1efd8=""><label data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Your Referral ID</font>
                                </font>
                            </label>
                            <div id="referral-id" data-v-44d1efd8=""><span data-v-44d1efd8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">{{ Auth()->user()->ref }}</font>
                                    </font>
                                </span></div> <button class="btn btn--brand" data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Copy</font>
                                </font>
                            </button>
                        </div>
                        <div class="referral-user__detail referral-user__link" data-v-44d1efd8=""><label data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Your Referral Link</font>
                                </font>
                            </label>
                            <div id="referral-link" data-v-44d1efd8=""><span data-v-44d1efd8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">{{ Auth()->user()->ref_link }}
                                        </font>
                                    </font>
                                </span></div> <button class="btn btn--brand" data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Copy</font>
                                </font>
                            </button>
                        </div>
                        <div class="referral-user__how" data-v-44d1efd8=""><a href="/referral"
                                class="btn btn--flex btn--accent-secondary" data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">
                                        Click here for how to join
                                    </font>
                                </font>
                            </a></div>
                        <div class="referral-user__detail referral-user__share" data-v-44d1efd8=""><label
                                data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Share your link</font>
                                </font>
                            </label>
                            <ul data-v-44d1efd8="" class="referral-user__social">
                                <li data-v-44d1efd8=""><a data-v-44d1efd8=""
                                        href="https://www.facebook.com/sharer.php?u={{ Auth()->user()->ref_link }}"
                                        target="_blank" rel="noopener" class="btn--flex"><img data-v-44d1efd8=""
                                            src="https://dmwl0ca1bvnm.cloudfront.net/common/default/social/facebook.svg"
                                            size="2x"></a></li>
                                <li data-v-44d1efd8=""><a data-v-44d1efd8=""
                                        href="https://twitter.com/share?url={{ Auth()->user()->ref_link }}" target="_blank"
                                        rel="noopener" class="btn--flex"><img data-v-44d1efd8=""
                                            src="https://dmwl0ca1bvnm.cloudfront.net/common/default/social/twitter.svg"
                                            size="2x"></a></li>
                                <li data-v-44d1efd8=""><a data-v-44d1efd8=""
                                        href="https://api.whatsapp.com/send?text={{ Auth()->user()->ref_link }}"
                                        target="_blank" rel="noopener" class="btn--flex"><img data-v-44d1efd8=""
                                            src="https://dmwl0ca1bvnm.cloudfront.net/common/default/social/whatsapp.svg"
                                            size="2x"></a></li>
                                <li data-v-44d1efd8=""><a data-v-44d1efd8=""
                                        href="https://telegram.me/share/url?url={{ Auth()->user()->ref_link }}"
                                        target="_blank" rel="noopener" class="btn--flex"><img data-v-44d1efd8=""
                                            src="https://dmwl0ca1bvnm.cloudfront.net/common/default/social/telegram.svg"
                                            size="2x"></a></li>
                            </ul>
                        </div>
                        <div class="referral-user__detail referral-user__bonus" data-v-44d1efd8=""><label
                                data-v-44d1efd8="">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Referral Bonus Commission</font>
                                </font>
                            </label>
                            <ul class="referral-user__bonus-detail" data-v-44d1efd8="">
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Casino</font>
                                        </font>
                                    </label> <span data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Up to 5.00%</font>
                                        </font>
                                    </span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Sports+</font>
                                        </font>
                                    </label> <span data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Up to 5.00%</font>
                                        </font>
                                    </span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Slots</font>
                                        </font>
                                    </label> <span data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Up to 5.00%</font>
                                        </font>
                                    </span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Poker</font>
                                        </font>
                                    </label> <span data-v-44d1efd8="">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Up to 0.50%</font>
                                        </font>
                                    </span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="referral-user__tabs" data-v-44d1efd8="">
                        <ul data-v-44d1efd8="">
                            <li data-v-44d1efd8=""><a href="#" class="btn btn--flex btn--light"
                                    data-v-44d1efd8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">
                                            Downlines
                                        </font>
                                    </font>
                                </a></li><!---->
                        </ul>
                        <section data-fetch-key="data-v-bd73e202:0" class="referral-history" data-v-bd73e202=""
                            data-v-44d1efd8="">
                            <div class="alert alert--info" data-v-bd73e202=""><i class="fas fa-info-circle fa-lg"
                                    data-v-0e010622=""></i>
                                <p>
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">There is currently no Referral History
                                            activity on your account.</font>
                                    </font>
                                </p>
                            </div>
                        </section>
                    </div>
                </section>
            </div>
        </main>
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                fetch('/referral-details')
                    .then(response => response.json())
                    .then(data => {
                        if (data.length > 0) {

                            document.getElementById('referral-info').style.display = 'none';
                            const table = document.createElement('table');
                            table.classList.add('referral-table');
                            table.innerHTML = `
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Referensi</th>
                                <th>Total Deposit</th>
                                <th>Bonus</th>
                                <th>Tanggal Bergabung</th>
                            </tr>
                        </thead>
                        <tbody id="referral-table-body"></tbody>
                    `;


                            document.getElementById('referral-section').appendChild(table);

                            // Isi tabel dengan data
                            data.forEach(referral => {
                                const row = document.createElement('tr');
                                row.innerHTML = `
                            <td>${referral.name}</td>
                            <td>${referral.parent_ref}</td>
                            <td>${referral.total_deposit}</td>
                            <td>${referral.bonus}</td>
                            <td>${referral.join_date}</td>
                        `;
                                document.getElementById('referral-table-body').appendChild(row);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching referral data:', error);
                    });
            });
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                function copyToClipboard(text) {
                    var tempInput = document.createElement("input");
                    tempInput.value = text;
                    document.body.appendChild(tempInput);
                    tempInput.select();
                    document.execCommand("copy");
                    document.body.removeChild(tempInput);
                }

                document.querySelectorAll('.btn--brand').forEach(function(button) {
                    button.addEventListener('click', function() {
                        var parent = this.closest('.referral-user__detail');
                        var textToCopy = parent.querySelector('span').innerText;
                        copyToClipboard(textToCopy);
                        alert("Copied to clipboard!");
                    });
                });
            });
        </script>
    @else
        <main>
            <div class="container"><!----> <!---->
                <section data-v-0cf802c8="" class="referral-info"><img data-v-0cf802c8=""
                        src="https://bh01static.s3.eu-west-3.amazonaws.com/referral/banner_1-1.jpg"
                        alt="{{ $setting->web }} - Referral" class="referral-info__banner"> <!---->
                    <div data-v-0cf802c8="" class="referral-info__bonus">
                        <h5 data-v-0cf802c8="">Komisi Bonus Referral</h5>
                        <ul data-v-0cf802c8="" class="referral-info__bonus-detail">
                            <li data-v-0cf802c8=""><label data-v-0cf802c8="">Casino</label> <span
                                    data-v-0cf802c8="">Hingga
                                    2.00%</span></li>
                            <li data-v-0cf802c8=""><label data-v-0cf802c8="">Sports+</label> <span
                                    data-v-0cf802c8="">Hingga
                                    2.00%</span></li>
                            <li data-v-0cf802c8=""><label data-v-0cf802c8="">Slots</label> <span
                                    data-v-0cf802c8="">Hingga
                                    2.00%</span></li>
                            <li data-v-0cf802c8=""><label data-v-0cf802c8="">Poker</label> <span
                                    data-v-0cf802c8="">Hingga
                                    0.2%</span></li>
                        </ul>
                    </div>
                    <div data-v-0cf802c8="" class="referral-info__details">
                        <h5 data-v-0cf802c8="">Jadilah bagian dari sistem Referral kami</h5>
                        <ul data-v-0cf802c8="">
                            <li data-v-0cf802c8=""><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-check-circle fa-lg"></i>
                                <h5 data-v-0cf802c8="">Gratis Pendaftaran</h5>
                            </li>
                            <li data-v-0cf802c8=""><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-check-circle fa-lg"></i>
                                <h5 data-v-0cf802c8="">Komisi dibagikan per minggu</h5>
                            </li>
                            <li data-v-0cf802c8=""><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-check-circle fa-lg"></i>
                                <h5 data-v-0cf802c8="">Passive income</h5>
                            </li>
                            <li data-v-0cf802c8=""><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-check-circle fa-lg"></i>
                                <h5 data-v-0cf802c8="">Pelayanan Customer Support 24/7</h5>
                            </li>
                        </ul>
                    </div> <a data-v-0cf802c8="" href="/registerasi" class="btn btn--flex btn--brand">
                        Daftar Sekarang
                    </a>
                    <div data-v-0cf802c8="" class="referral-info__steps">
                        <h5 data-v-0cf802c8="">Untuk memulai, ikuti 4 langkah mudah ini</h5>
                        <ul data-v-0cf802c8="">
                            <li data-v-0cf802c8="" class="surface"><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-user-plus"></i>
                                <h5 data-v-0cf802c8="">Daftar</h5>
                                <p data-v-0cf802c8="">Daftarkan diri Anda dengan mengisi formulir pendaftaran.</p>
                            </li>
                            <li data-v-0cf802c8="" class="surface"><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-shield-alt"></i>
                                <h5 data-v-0cf802c8="">OTP</h5>
                                <p data-v-0cf802c8="">Verifikasi pendaftaran Anda melalui kode OTP.</p>
                            </li>
                            <li data-v-0cf802c8="" class="surface"><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-link"></i>
                                <h5 data-v-0cf802c8="">Dapatkan Link Referral Anda</h5>
                                <p data-v-0cf802c8="">Anda akan mendapatkan link unik referral Anda untuk dibagikan.</p>
                            </li>
                            <li data-v-0cf802c8="" class="surface"><i data-v-0e010622="" data-v-0cf802c8=""
                                    class="fas fa-share"></i>
                                <h5 data-v-0cf802c8="">Bagikan</h5>
                                <p data-v-0cf802c8="">Bagikan link referral Anda agar orang-orang mendaftarkan diri dengan
                                    link
                                    Anda.</p>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </main>
    @endif
@endsection