@extends('admin.layout')
@section('title', 'Transactions')

@section('content')
<h1 class="page-title">Transactions</h1>

<div x-data="transactions()" x-init="load()">
    <div class="toolbar">
        <input type="text" placeholder="Reference or phone number" x-model="filters.search" @keyup.enter="load()">
        <select x-model="filters.service_type" @change="load()">
            <option value="">All services</option>
            <option value="data">Data</option>
            <option value="airtime">Airtime</option>
            <option value="electricity">Electricity</option>
            <option value="cable">Cable</option>
            <option value="education">Education</option>
        </select>
        <select x-model="filters.service_status" @change="load()">
            <option value="">All statuses</option>
            <option value="SUCCESS">Success</option>
            <option value="PROCESSING">Processing</option>
            <option value="FAILED">Failed</option>
            <option value="PENDING_REVIEW">Pending review</option>
            <option value="API_TIMEOUT">Timed out</option>
        </select>
        <button class="btn" @click="filters = {}; load()">Clear filters</button>
        <button class="btn primary" @click="exportCsv()">Export CSV</button>
    </div>

    <div class="panel" style="padding:0;">
        <table class="data-table">
            <thead>
            <tr>
                <th>Reference</th>
                <th>Phone</th>
                <th>Service</th>
                <th>Amount</th>
                <th>Payment</th>
                <th>Status</th>
                <th>Date</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <template x-for="t in rows" :key="t.id">
                <tr>
                    <td x-text="t.reference"></td>
                    <td x-text="t.customer_phone"></td>
                    <td x-text="t.service_type"></td>
                    <td x-text="fmt(t.amount)"></td>
                    <td x-text="t.payment_status"></td>
                    <td><span :class="'badge ' + badgeClass(t.service_status)" x-text="t.service_status"></span></td>
                    <td x-text="new Date(t.created_at).toLocaleString()"></td>
                    <td>
                        <button class="btn" x-show="['FAILED','API_TIMEOUT','API_ERROR','PENDING_REVIEW'].includes(t.service_status)"
                                @click="retry(t)">Retry</button>
                    </td>
                </tr>
            </template>
            <tr x-show="rows.length === 0"><td colspan="8" style="text-align:center; color:var(--ink-soft); padding:24px;">No transactions match these filters.</td></tr>
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
function transactions() {
    return {
        rows: [],
        filters: {},
        fmt(v) { return '\u20a6' + Number(v).toLocaleString(undefined, {maximumFractionDigits: 0}); },
        badgeClass(status) {
            if (status === 'SUCCESS') return 'success';
            if (['FAILED', 'API_ERROR'].includes(status)) return 'failed';
            return 'pending';
        },
        async load() {
            const params = new URLSearchParams(this.filters).toString();
            const res = await fetch('/api/admin/transactions?' + params, { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            this.rows = data.data ?? [];
        },
        async retry(t) {
            await fetch(`/api/admin/transactions/${t.id}/retry`, { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' } });
            this.load();
        },
        exportCsv() {
            window.location = '/api/admin/transactions/export?format=csv';
        },
    };
}
</script>
@endpush
@endsection