@extends('layout.desktop.main')
@section('content')
    <style>
        .activity {
            width: 100%;
            /* Ensure section takes full width */
            box-sizing: border-box;
            /* Include padding and border in element's total width */
        }

        .activity__content {
            padding: 20px;
            box-sizing: border-box;
            /* Include padding in width calculation */
        }

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

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

        .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;
        }

        @media (max-width: 768px) {

            .activity__table th,
            .activity__table td {
                padding: 8px;
            }

            .activity__table {
                font-size: 14px;
            }
        }
    </style>
    <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 data-v-0e010622="" class="fas fa-chevron-right fa-xs"></i></li>
                    <li class="nav-item"><a href="/activity" aria-current="page"
                            class="app-link--exact-active app-link--active" name="Aktivitas" data-ref="aktivitas">
                            Aktivitas
                        </a></li> <!---->
                    <li data-pos="end" class="nav-observer"></li>
                </ul>
            </nav>
            <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" data-tab="saldo"><button data-v-b19f0ec8=""
                                    class="btn btn--primary">
                                    Saldo
                                </button></li>
                            <li data-v-b19f0ec8="" class=""><button data-v-b19f0ec8="" class="btn btn--primary"
                                    data-tab="casino">
                                    Casino
                                </button></li>
                            <li data-v-b19f0ec8="" class=""><button data-v-b19f0ec8="" class="btn btn--primary"
                                    data-tab="sport">
                                    Sports
                                </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>Konten untuk tab Casino.</p>
                </div>
                <div class="activity__content surface" id="sports" style="display: none;">
                    <p>Konten untuk tab Sports.</p>
                </div>
            </section>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.activity__nav li');
            const tabContents = document.querySelectorAll('.activity__content');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // Remove active class from all tabs
                    tabs.forEach(t => t.classList.remove('activity__nav--active'));

                    // Hide all tab contents
                    tabContents.forEach(content => content.style.display = 'none');

                    // Add active class to the clicked tab
                    this.classList.add('activity__nav--active');

                    // Show the corresponding tab content
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(tabId).style.display = '';
                });
            });

            // Optionally, you can set the default active tab
            tabs[0].click(); // Activate the first tab on page load
        });
    </script>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/get-transactions',
                type: 'GET',
                success: function(data) {
                    let activityContent = $('#activity__table-body');

                    if (Array.isArray(data) && data.length === 0) {
                        // Jika tidak ada data, tampilkan pesan
                        activityContent.html(
                            '<tr><td colspan="6">Belum ada aktivitas saat ini</td></tr>');
                    } else {
                        // Kosongkan konten sebelumnya jika ada
                        activityContent.empty();

                        // Loop melalui data dan buat HTML untuk 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;
                            }

                            // 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