@extends('app')

@section('title', 'Transaksi Logs')

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Transaksi Logs</h1>
            <p class="mt-1 text-sm text-gray-600">History daripada all payments and subscriptions.</p>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table id="transactionTable" class="table w-full">
                <thead>
                    <tr>
                        <th>Tarikh</th>
                        <th>User</th>
                        <th>Penerangan</th>
                        <th>Jumlah (MYR)</th>
                        <th>Status</th>
                        <th>Kaedah Pembayaran</th>
                        <th>Bill Code</th>
                    </tr>
                </thead>
                <tbody id="transactionTbody">
                    <!-- Data will be populated via AJAX -->
                </tbody>
            </table>
        </div>
        <div id="pagination" class="p-4">
            <!-- Pagination will be populated via AJAX -->
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const token = localStorage.getItem('auth_token');
            let currentUser = null;

            // Fetch current user data first
            function fetchCurrentUser() {
                return $.ajax({
                    url: '/api/me',
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                });
            }

            function fetchTransaksis(page = 1) {
                let url = `/api/getTransaksis?page=${page}`;

                $.ajax({
                    url: url,
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    success: function(response) {
                        const transactions = response.data.data || response.data;
                        populateTable(transactions);
                        populatePagination(response.data);
                    },
                    error: function(xhr) {
                        $('#transactionTbody').html(
                            '<tr><td colspan="7" class="text-center py-8 text-red-500">Failed to load transactions.</td></tr>'
                        );
                    }
                });
            }

            function populateTable(transactions) {
                const tbody = $('#transactionTbody');
                tbody.empty();

                if (!transactions || transactions.length === 0) {
                    tbody.html(
                        '<tr><td colspan="7" class="text-center py-8 text-gray-500">Tiada transaksi dijumpai.</td></tr>'
                    );
                    return;
                }

                transactions.forEach(function(transaction) {
                    const statusBadge = getStatusBadge(transaction.status);
                    const row = `
                <tr>
                    <td>${formatDate(transaction.created_at)}</td>
                    <td>
                        <div class="font-medium">${transaction.user.name}</div>
                        <div class="text-sm text-gray-500">${transaction.user.email}</div>
                    </td>
                    <td>${transaction.description}</td>
                    <td class="font-mono">${formatJumlah(transaction.amount)}</td>
                    <td>${statusBadge}</td>
                    <td><span class="badge badge-ghost">${transaction.payment_method}</span></td>
                    <td class="font-mono">${transaction.bill_code}</td>
                </tr>
            `;
                    tbody.append(row);
                });
            }

            function populatePagination(response) {
                const pagination = $('#pagination');
                pagination.empty();

                if (!response || !response.last_page || response.last_page <= 1) {
                    return;
                }

                let paginationHtml = '<div class="flex justify-center space-x-2">';

                if (response.prev_page_url) {
                    paginationHtml +=
                        `<button class="btn btn-sm" onclick="fetchTransaksis(${response.current_page - 1})">Sebelum</button>`;
                }

                for (let i = 1; i <= response.last_page; i++) {
                    const activeClass = i === response.current_page ? 'btn-primary' : '';
                    paginationHtml +=
                        `<button class="btn btn-sm ${activeClass}" onclick="fetchTransaksis(${i})">${i}</button>`;
                }

                if (response.next_page_url) {
                    paginationHtml +=
                        `<button class="btn btn-sm" onclick="fetchTransaksis(${response.current_page + 1})">Seterusnya</button>`;
                }

                paginationHtml += '</div>';
                pagination.html(paginationHtml);
            }

            function getStatusBadge(status) {
                switch (status) {
                    case 'paid':
                        return '<span class="badge badge-success">Paid</span>';
                    case 'pending':
                        return '<span class="badge badge-warning">Tertangguh</span>';
                    default:
                        return '<span class="badge badge-error">Failed</span>';
                }
            }

            function formatDate(dateString) {
                const date = new Date(dateString);
                return date.toLocaleDateString('en-GB', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            }

            function formatJumlah(amount) {
                return parseFloat(amount).toFixed(2);
            }

            // Initialize: fetch user data first, then load transactions
            fetchCurrentUser().done(function(response) {
                currentUser = response.data;
                fetchTransaksis();
            }).fail(function() {
                $('#transactionTbody').html(
                    '<tr><td colspan="7" class="text-center py-8 text-red-500">Failed to load user data.</td></tr>'
                );
            });
        });
    </script>
@endpush