@extends('layouts.app')

@section('title', 'Transactions — Hisab')

@section('content')
@php
function bdt($n) { return '৳ ' . number_format($n, 2); }
@endphp

<div class="mx-auto max-w-7xl space-y-6">
    <div class="flex items-end justify-between">
        <div>
            <h1 class="font-display text-3xl font-semibold tracking-tight">Transactions</h1>
            <p class="text-sm text-muted-foreground">Shob transaction filter, search, ebong export korun</p>
        </div>
        @if (!$wallets->isEmpty())
            <button onclick="document.getElementById('add-txn-modal').showModal()" class="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground"><x-icon name="plus" class="h-4 w-4" /> Add transaction</button>
        @endif
    </div>

    <div class="rounded-2xl border border-border bg-card p-5">
        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="relative sm:w-80">
                <x-icon name="search" class="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
                <input type="text" id="txn-search" placeholder="Search transactions..." class="w-full rounded-lg border border-border bg-background pl-9 pr-3 py-2 text-sm">
            </div>
            <button onclick="window.print()" class="inline-flex items-center gap-1 rounded-md border border-border px-3 py-2 text-sm hover:bg-accent">Print / Save PDF</button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-border/60 text-left text-xs uppercase tracking-wider text-muted-foreground">
                        <th class="px-3 py-3">Date</th>
                        <th class="px-3 py-3">Type</th>
                        <th class="px-3 py-3">Wallet</th>
                        <th class="px-3 py-3">From/To</th>
                        <th class="px-3 py-3">Reference</th>
                        <th class="px-3 py-3 text-right">Amount</th>
                        <th class="px-3 py-3 text-right">Fee</th>
                        <th class="px-3 py-3 text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="txn-table">
                    @forelse ($transactions as $t)
                        <tr class="border-b border-border/40 txn-row" data-search="{{ strtolower($t->type . ' ' . $t->counterparty . ' ' . $t->reference . ' ' . $t->wallet->name . ' ' . $t->note) }}">
                            <td class="px-3 py-3 text-muted-foreground">{{ $t->occurred_at->format('M d, Y') }}</td>
                            <td class="px-3 py-3">
                                <span class="rounded-full px-2 py-0.5 text-xs {{ $t->direction === 'in' ? 'bg-emerald-500/15 text-emerald-500' : 'bg-red-500/15 text-red-500' }}">{{ $t->type }}</span>
                            </td>
                            <td class="px-3 py-3">{{ $t->wallet->name }}</td>
                            <td class="px-3 py-3">{{ $t->counterparty ?? '—' }}</td>
                            <td class="px-3 py-3">{{ $t->reference ?? '—' }}</td>
                            <td class="px-3 py-3 text-right font-display {{ $t->direction === 'in' ? 'text-emerald-500' : 'text-red-500' }}">{{ $t->direction === 'in' ? '+' : '−' }} {{ bdt($t->amount) }}</td>
                            <td class="px-3 py-3 text-right">{{ bdt($t->fee) }}</td>
                            <td class="px-3 py-3 text-center">
                                <form method="POST" action="{{ route('transactions.destroy', $t) }}" onsubmit="return confirm('Delete korben?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-md hover:bg-accent text-muted-foreground"><x-icon name="trash" class="h-4 w-4" /></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="px-3 py-10 text-center text-muted-foreground">Kono transaction nei.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@if (!$wallets->isEmpty())
<dialog id="add-txn-modal" class="rounded-2xl border border-border bg-card p-0 backdrop:bg-black/50">
    <div class="w-full max-w-md p-6">
        <h3 class="font-display text-lg font-semibold mb-4">Notun transaction</h3>
        <form method="POST" action="{{ route('transactions.store') }}" class="space-y-3">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-medium">Wallet</label>
                    <select name="wallet_id" required class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
                        @foreach ($wallets as $w)
                            <option value="{{ $w->id }}">{{ $w->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium">Type</label>
                    <select name="type" required class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
                        <option value="send_money">Send money</option>
                        <option value="receive">Receive</option>
                        <option value="cash_in">Cash in</option>
                        <option value="cash_out">Cash out</option>
                        <option value="payment">Payment</option>
                        <option value="recharge">Recharge</option>
                        <option value="bill">Bill</option>
                        <option value="transfer">Transfer</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-medium">Direction</label>
                    <select name="direction" required class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
                        <option value="in">In</option>
                        <option value="out">Out</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium">Amount</label>
                    <input type="number" step="0.01" name="amount" required class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium">Fee</label>
                <input type="number" step="0.01" name="fee" value="0" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium">Counterparty</label>
                <input type="text" name="counterparty" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium">Reference</label>
                <input type="text" name="reference" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium">Note</label>
                <textarea name="note" rows="2" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium">Date</label>
                <input type="datetime-local" name="occurred_at" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button type="button" onclick="document.getElementById('add-txn-modal').close()" class="rounded-lg border border-border px-4 py-2 text-sm">Cancel</button>
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">Save</button>
            </div>
        </form>
    </div>
</dialog>
@endif

<script>
document.getElementById('txn-search').addEventListener('input', function () {
    const s = this.value.toLowerCase();
    document.querySelectorAll('.txn-row').forEach(row => {
        row.style.display = row.dataset.search.includes(s) ? '' : 'none';
    });
});
</script>
@endsection