@extends('layout.mobile.main')
@section('mobile')
    <style>
        .activity {
            width: 100%;
            box-sizing: border-box;
        }

        .activity__content {
            padding: 20px;
            box-sizing: border-box;
        }

        .activity__table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            table-layout: fixed;
        }

        .activity__table th,
        .activity__table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            word-wrap: break-word;
        }

        .activity__table th {
            background-color: #a97e21;
            font-weight: bold;
        }

        .chip {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            color: #fff;
            text-align: center;
        }

        .chip--info {
            background-color: #007bff;
        }

        .chip--success {
            background-color: #28a745;
        }

        .chip--danger {
            background-color: #dc3545;
        }

        /* Make table responsive */
        .activity__table-wrapper {
            width: 100%;
            overflow-x: auto;
            /* Add horizontal scroll if the content exceeds the container width */
        }

        @media (max-width: 768px) {

            .activity__table th,
            .activity__table td {
                padding: 8px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {

            /* Adjust further for small screens */
            .activity__table-wrapper {
                overflow-x: auto;
            }

            .activity__table th,
            .activity__table td {
                padding: 6px;
                font-size: 12px;
            }

            .chip {
                padding: 2px 6px;
                font-size: 12px;
            }
        }
    </style>
    <main>
        <div class="container"><!----> <!---->
            <section data-v-b19f0ec8="" class="activity">
                <header data-v-b19f0ec8="" class="activity__header">
                    <nav data-v-b19f0ec8="" class="activity__nav">
                        <ul data-v-b19f0ec8="" class="surface">
                            <li data-v-b19f0ec8="" class="activity__nav--active" id="balanceTab"><button data-v-b19f0ec8=""
                                    class="btn btn--primary">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">
                                            Aktif
                                        </font>
                                    </font>
                                </button></li>
                            <li data-v-b19f0ec8="" class=""><button data-v-b19f0ec8="" class="btn btn--primary"
                                    id="casinoTab">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">
                                            Complete
                                        </font>
                                    </font>
                                </button></li>
                        </ul>
                    </nav>
                </header>
                <div class="activity__content surface" id="saldo">
                    <table class="activity__table">
                        <thead>
                            <tr>
                                <th>Judul</th>
                                <th>Mulai</th>
                                <th>Selesai</th>
                                <th>Jumlah</th>
                                <th>Turnover</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="claim__table-body">
                            <!-- AJAX will populate this section -->
                        </tbody>
                    </table>
                </div>
                <div class="activity__content surface" id="casino" style="display: none;">
                    <p style="text-align: center">Belum Ada Aktivitas</p>
                </div>

            </section>
        </div>
    </main>

    <script>
        $(document).ready(function() {
            // Fungsi untuk mengaktifkan tab berdasarkan id
            function showTab(tabId) {
                // Sembunyikan semua konten
                $('.activity__content').hide();
                // Tampilkan konten yang sesuai dengan tab yang diklik
                $(tabId).show();

                // Hapus kelas aktif dari semua tab
                $('.activity__nav li').removeClass('activity__nav--active');

                // Tambahkan kelas aktif pada tab yang diklik
                $(`button[id="${tabId.replace('#', '') + 'Tab'}"]`).closest('li').addClass('activity__nav--active');
            }

            // Event listener untuk tab Balance
            $('#balanceTab').on('click', function() {
                showTab('#saldo');
            });

            // Event listener untuk tab Casino
            $('#casinoTab').on('click', function() {
                showTab('#casino');
            });

            // Event listener untuk tab Sports
            $('#sportsTab').on('click', function() {
                showTab('#sports');
            });

            // Default aktifkan tab saldo di awal
            showTab('#saldo');
        });
    </script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/history/bonuses', // Endpoint untuk mendapatkan data bonus
                type: 'GET',
                success: function(response) {
                    let promotion = response.promotion;

                    if (promotion) {
                        // Mendapatkan tbody berdasarkan ID tabel yang sesuai
                        let tableBody = $('#claim__table-body');
                        tableBody.empty(); // Kosongkan isi tabel sebelumnya jika ada

                        // Membuat baris tabel dengan data yang didapatkan dari response
                        let row = `
                        <tr>
                            <td>${promotion.title || 'N/A'}</td>
                            <td>${promotion.start_date || 'N/A'}</td>
                            <td>${promotion.end_date || 'N/A'}</td>
                            <td>${promotion.amount !== null ? 'IDR ' + new Intl.NumberFormat('id-ID').format(promotion.amount) : 'N/A'}</td>
                            <td style="text-align: center;">${promotion.turnover || 'N/A'}</td>
                            <td>${promotion.status || 'N/A'}</td>
                        </tr>`;

                        // Menambahkan baris ke dalam tabel
                        tableBody.append(row);
                    } else {
                        console.log('No promotion data found.');
                        // Jika tidak ada data promotion
                        $('#claim__table-body').html(
                            '<tr><td colspan="6">Belum ada klaim bonus saat ini</td></tr>'
                        );
                    }
                },
                error: function() {
                    console.error('Gagal memuat data bonus.');
                    alert('Terjadi kesalahan saat memuat data bonus.');
                }
            });
        });
    </script>
@endsection