@extends('admin.layout', ['title' => 'Payments'])

@section('content')
<div id="alertBox" class="alert d-none" role="alert"></div>

<div class="card rounded-0 border-0 p-0 m-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Provider</th>
                        <th>Status</th>
                        <th>Currency</th>
                        <th>Amount</th>
                        <th>External ID</th>
                        <th>Credited</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody id="rows"></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.__ADMIN_TOKEN__ = @json($adminToken);
    const apiBase = '/api/admin';

    function showAlert(type, message) {
        const box = document.getElementById('alertBox');
        box.classList.remove('d-none', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info');
        box.classList.add('alert-' + type);
        box.textContent = message;
        setTimeout(() => box.classList.add('d-none'), 3500);
    }

    async function apiFetch(path, options = {}) {
        const headers = options.headers || {};
        headers['Accept'] = 'application/json';
        headers['Authorization'] = 'Bearer ' + window.__ADMIN_TOKEN__;
        if (options.body && !(options.body instanceof FormData)) {
            headers['Content-Type'] = 'application/json';
        }
        const res = await fetch(path, { ...options, headers });
        const json = await res.json().catch(() => ({}));
        if (!res.ok || json.success === false) {
            const msg = (json && (json.msg || json.message)) ? (json.msg || json.message) : 'Erro';
            throw new Error(msg);
        }
        return json;
    }

    async function load() {
        const res = await apiFetch(apiBase + '/payments');
        const items = res.data?.data || [];
        const tbody = document.getElementById('rows');
        tbody.innerHTML = '';

        for (const p of items) {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${p.id}</td>
                <td>${p.user_id}</td>
                <td>${p.provider ?? ''}</td>
                <td>${p.status ?? ''}</td>
                <td>${p.currency ?? ''}</td>
                <td>${p.amount ?? ''}</td>
                <td>${p.external_id ?? ''}</td>
                <td>${p.credited_at ? 'Yes' : 'No'}</td>
                <td>${p.created_at ?? ''}</td>
            `;
            tbody.appendChild(tr);
        }
    }

    (async () => {
        try {
            await load();
        } catch (err) {
            showAlert('danger', err.message);
        }
    })();
</script>
@endpush