@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Transaction Vouchers</h2>
        <button class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">+ New Transaction</button>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full leading-normal">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-200 text-gray-600 text-left text-sm uppercase font-semibold">
                    <th class="px-5 py-3">Date</th>
                    <th class="px-5 py-3">Reference</th>
                    <th class="px-5 py-3">Type</th>
                    <th class="px-5 py-3">Amount</th>
                    <th class="px-5 py-3">Actions</th>
                </tr>
            </thead>
            <tbody id="transaction-list">
                <!-- Data will be injected here by JS -->
            </tbody>
        </table>
    </div>
</div>

<script>
    async function loadTransactions() {
        const response = await fetch('/api/v1/accounting/transactions', {
            headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
        });
        const data = await response.json();
        
        const tbody = document.getElementById('transaction-list');
        tbody.innerHTML = data.map(tx => `
            <tr class="border-b border-gray-200 hover:bg-gray-50">
                <td class="px-5 py-4 text-sm">${tx.date_}</td>
                <td class="px-5 py-4 text-sm font-medium">${tx.reference_no}</td>
                <td class="px-5 py-4 text-sm capitalize">${tx.voucher_type}</td>
                <td class="px-5 py-4 text-sm font-bold text-green-600">${new Intl.NumberFormat().format(tx.amount)}</td>
                <td class="px-5 py-4 text-sm">
                    <button onclick="deleteTx(${tx.id})" class="text-red-600 hover:underline">Delete</button>
                </td>
            </tr>
        `).join('');
    }

    async function deleteTx(id) {
        if(confirm('Are you sure?')) {
            await fetch(`/api/v1/accounting/transactions/${id}`, {
                method: 'DELETE',
                headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
            });
            loadTransactions();
        }
    }

    loadTransactions();
</script>
@endsection