@extends('layout.desktop.main')
@section('content')
    <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" style="margin-bottom: 20px;">
                @include('layout.desktop.running_text')
                <nav class="app-breadcrumbs app-breadcrumbs--d">
                    <ul>
                        <li data-pos="start" class="nav-observer"></li>
                        <li class="nav-item nav-item--home"><a href="/" class="app-link--active" name="Beranda">
                                Beranda
                            </a></li>
                        <li class="nav-item nav-item--fill"><i data-v-0e010622="" class="icon-arrow-right icon--xs"></i>
                        </li>
                        <li class="nav-item"><a href="/referral" class="app-link--active" name="Referral"
                                data-ref="referral">
                                Referral
                            </a></li> <!---->
                        <li data-pos="end" class="nav-observer"></li>
                    </ul>
                </nav>
                <section data-v-44d1efd8="" class="referral-user referral-user--d">
                    <header data-v-44d1efd8="" class="page-header"><i class="fas fa-share fa-lg"></i>
                        <h3 data-v-44d1efd8="">Referral</h3>
                    </header> <!---->
                    <div data-v-44d1efd8="" class="referral-user__links">
                        <div data-v-44d1efd8="" class="referral-user__detail referral-user__id"><label data-v-44d1efd8="">ID
                                Referral Anda</label>
                            <div data-v-44d1efd8="" id="referral-id"><span
                                    data-v-44d1efd8="">{{ Auth()->user()->ref }}</span></div>
                            <button data-v-44d1efd8="" class="btn btn--brand">Copy</button>
                        </div>
                        <div data-v-44d1efd8="" class="referral-user__detail referral-user__link"><label
                                data-v-44d1efd8="">Link Referral Anda</label>
                            <div data-v-44d1efd8="" id="referral-link"><span
                                    data-v-44d1efd8="">{{ Auth()->user()->ref_link }}</span></div>
                            <button data-v-44d1efd8="" class="btn btn--brand">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>
                        <div data-v-44d1efd8="" class="referral-user__detail referral-user__share"><label
                                data-v-44d1efd8="">Bagikan link anda</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 data-v-44d1efd8="" class="referral-user__detail referral-user__bonus"><label
                                data-v-44d1efd8="">Komisi Bonus Referral</label>
                            <ul data-v-44d1efd8="" class="referral-user__bonus-detail">
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">Casino</label> <span
                                        data-v-44d1efd8="">Hingga 2.00%</span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">Sports+</label> <span
                                        data-v-44d1efd8="">Hingga 2.00%</span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">Slots</label> <span
                                        data-v-44d1efd8="">Hingga 2.00%</span></li>
                                <li data-v-44d1efd8=""><label data-v-44d1efd8="">Poker</label> <span
                                        data-v-44d1efd8="">Hingga 0.20%</span></li>
                            </ul>
                        </div>
                    </div>
                    <div data-v-44d1efd8="" class="referral-user__tabs">
                        <ul data-v-44d1efd8="">
                            <li data-v-44d1efd8=""><a data-v-44d1efd8="" href="#"
                                    class="btn btn--flex btn--light">
                                    Downline
                                </a></li><!---->
                        </ul>
                        <section data-v-bd73e202="" data-v-44d1efd8="" class="referral-history referral-history--d"
                            id="referral-section">
                            <div data-v-bd73e202="" class="alert alert--info" id="referral-info">
                                <i data-v-0e010622="" class="icon-info icon--lg"></i>
                                <p id="referral-message">Saat ini belum ada aktivitas Referral History pada akun anda.</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">
                @include('layout.desktop.running_text')
                <nav class="app-breadcrumbs app-breadcrumbs--d">
                    <ul>
                        <li data-pos="start" class="nav-observer"></li>
                        <li class="nav-item nav-item--home"><a href="/" class="app-link--active" name="Beranda">
                                Beranda
                            </a></li>
                        <li class="nav-item nav-item--fill"><i class="fas fa-chevron-right fa-xs"></i>
                        </li>
                        <li class="nav-item"><a href="/referral" aria-current="page"
                                class="app-link--exact-active app-link--active" name="referral" data-ref="referral">
                                Referral
                            </a>
                        </li>
                    </ul>
                </nav>
                <section data-v-0cf802c8="" class="referral-info referral-info--d">
                    <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="">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">Referral Bonus Commission</font>
                            </font>
                        </h5>
                        <ul data-v-0cf802c8="" class="referral-info__bonus-detail">
                            <li data-v-0cf802c8="">
                                <label data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Casino</font>
                                    </font>
                                </label>
                                <span data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Up to 5.00%</font>
                                    </font>
                                </span>
                            </li>
                            <li data-v-0cf802c8="">
                                <label data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Sports+</font>
                                    </font>
                                </label>
                                <span data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Up to 5.00%</font>
                                    </font>
                                </span>
                            </li>
                            <li data-v-0cf802c8="">
                                <label data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Slots</font>
                                    </font>
                                </label>
                                <span data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Up to 5.00%</font>
                                    </font>
                                </span>
                            </li>
                            <li data-v-0cf802c8="">
                                <label data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Poker</font>
                                    </font>
                                </label>
                                <span data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Up to 0.50%</font>
                                    </font>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div data-v-0cf802c8="" class="referral-info__details">
                        <h5 data-v-0cf802c8="">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">Be a part of our Referral system</font>
                            </font>
                        </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Free Registration</font>
                                    </font>
                                </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Commission is distributed weekly</font>
                                    </font>
                                </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Passive income</font>
                                    </font>
                                </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">24/7 Customer Support Service</font>
                                    </font>
                                </h5>
                            </li>
                        </ul>
                    </div>
                    <a data-v-0cf802c8="" href="/registerasi" class="btn btn--flex btn--brand">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">Register Now</font>
                        </font>
                    </a>
                    <div data-v-0cf802c8="" class="referral-info__steps">
                        <h5 data-v-0cf802c8="">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">To get started, follow these 4 easy steps</font>
                            </font>
                        </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">List</font>
                                    </font>
                                </h5>
                                <p data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Register yourself by filling out the
                                            registration form.</font>
                                    </font>
                                </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="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">OTP</font>
                                    </font>
                                </h5>
                                <p data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Verify your registration via OTP code.
                                        </font>
                                    </font>
                                </p>
                            </li>
                            <li data-v-0cf802c8="" class="surface">
                                <i data-v-0e010622="" data-v-0cf802c8="" class="fas fa-link "></i>
                                <h5 data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Get Your Referral Link</font>
                                    </font>
                                </h5>
                                <p data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">You will get your unique referral link to
                                            share.
                                        </font>
                                    </font>
                                </p>
                            </li>
                            <li data-v-0cf802c8="" class="surface">
                                <i data-v-0e010622="" data-v-0cf802c8="" class="fas fa-share-square "></i>
                                <h5 data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Share</font>
                                    </font>
                                </h5>
                                <p data-v-0cf802c8="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Share your referral link to get people to
                                            register with your link.</font>
                                    </font>
                                </p>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </main>
    @endif
@endsection