@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;">
                                            Balance
                                        </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;">
                                            Casino
                                        </font>
                                    </font>
                                </button></li>
                            <li data-v-b19f0ec8="" class=""><button data-v-b19f0ec8="" class="btn btn--primary"
                                    id="sportsTab">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">
                                            Sports
                                        </font>
                                    </font>
                                </button></li>
                        </ul>
                    </nav>
                </header>
                <div class="activity__content surface" id="saldo">
                    <table class="activity__table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Service</th>
                                <th>Tipe</th>
                                <th>Jumlah</th>
                                <th>Status</th>
                                <th>Diperbarui pada</th>
                            </tr>
                        </thead>
                        <tbody id="activity__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>
                <div class="activity__content surface" id="sports" 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 request to get transactions
            $.ajax({
                url: '/get-transactions',
                type: 'GET',
                success: function(data) {
                    let activityContent = $('#activity__table-body');

                    // Cek jika data kosong
                    if (data.length === 0) {
                        activityContent.html(
                            '<tr><td colspan="6">Belum ada aktivitas saat ini</td></tr>');
                    } else {
                        // Kosongkan konten sebelumnya
                        activityContent.empty();

                        // Looping melalui setiap transaksi
                        data.forEach(function(transaction) {
                            let service = transaction.type == 1 ? 'Deposit' : 'Withdraw';
                            let statusClass = '';
                            let statusText = '';

                            // Tentukan status transaksi
                            switch (transaction.status_id) {
                                case 1:
                                    statusClass = 'chip--info';
                                    statusText = 'Pending';
                                    break;
                                case 2:
                                    statusClass = 'chip--success';
                                    statusText = 'Sukses';
                                    break;
                                case 3:
                                    statusClass = 'chip--danger';
                                    statusText = 'Ditolak';
                                    break;
                                default:
                                    statusClass = 'chip--default';
                                    statusText = 'Unknown';
                                    break;
                            }

                            // Format jumlah dan tanggal
                            let amountFormatted =
                                `Rp ${new Intl.NumberFormat('id-ID').format(transaction.amount)}`;
                            let updatedAt = new Date(transaction.updated_at).toLocaleString(
                                'id-ID');

                            // Tambahkan transaksi ke dalam tabel
                            activityContent.append(`
                            <tr>
                                <td>#${transaction.id}</td>
                                <td>Request</td>
                                <td>${service}</td>
                                <td>${amountFormatted}</td>
                                <td><div class="chip ${statusClass}">${statusText}</div></td>
                                <td>${updatedAt}</td>
                            </tr>
                        `);
                        });
                    }
                },
                error: function() {
                    console.error('Failed to load transactions.');
                    alert('Gagal memuat data transaksi.');
                }
            });
        });
    </script>
@endsection