@extends('layouts.app')

@section('title', 'Dashboard — 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 flex-wrap items-end justify-between gap-3">
        <div>
            <h1 class="font-display text-3xl font-semibold tracking-tight">Overview</h1>
            <p class="text-sm text-muted-foreground">Apnar shob wallet er ekshathe hisab</p>
        </div>
        @if ($wallets->isEmpty())
            <a href="{{ route('wallets.index') }}" class="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground">Prothome wallet add korun</a>
        @else
            <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="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
        <div class="rounded-2xl border border-primary/40 bg-card p-4">
            <div class="text-[10px] uppercase tracking-wider text-muted-foreground">bKash balance</div>
            <div class="mt-1 font-display text-xl font-semibold">{{ bdt($totals['perType']['bkash']['balance'] ?? 0) }}</div>
            <div class="text-[11px] text-muted-foreground">Ekhon bKash e ache</div>
        </div>
        <div class="rounded-2xl border border-border bg-card p-4">
            <div class="text-[10px] uppercase tracking-wider text-muted-foreground">bKash send money</div>
            <div class="mt-1 font-display text-xl font-semibold text-red-500">{{ bdt($totals['bkashAdj']) }}</div>
            <div class="text-[11px] text-muted-foreground">bKash theke send</div>
        </div>
        <div class="rounded-2xl border border-border bg-card p-4">
            <div class="text-[10px] uppercase tracking-wider text-muted-foreground">Nagad send money</div>
            <div class="mt-1 font-display text-xl font-semibold text-red-500">{{ bdt($totals['nagadAdj']) }}</div>
            <div class="text-[11px] text-muted-foreground">Nagad theke send</div>
        </div>
        <div class="rounded-2xl border border-primary/40 bg-card p-4">
            <div class="text-[10px] uppercase tracking-wider text-muted-foreground">Baki send money</div>
            <div class="mt-1 font-display text-xl font-semibold">{{ bdt($totals['totalSendMoneyNet']) }}</div>
            <div class="text-[11px] text-muted-foreground">Bank e paoa {{ bdt($totals['bankIn']) }} bad</div>
        </div>
        <div class="rounded-2xl border border-border bg-card p-4">
            <div class="text-[10px] uppercase tracking-wider text-muted-foreground">Bank balance</div>
            <div class="mt-1 font-display text-xl font-semibold">{{ bdt($totals['perType']['bank']['balance'] ?? 0) }}</div>
            <div class="text-[11px] text-muted-foreground">In {{ bdt($totals['perType']['bank']['in'] ?? 0) }}</div>
        </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
        <div class="rounded-2xl border border-border bg-card p-5 lg:col-span-2">
            <h2 class="font-display text-lg font-semibold">Last 30 days</h2>
            <p class="text-xs text-muted-foreground mb-4">In vs Out flow</p>
            <div class="h-64">
                <canvas id="chart"></canvas>
            </div>
        </div>
        <div class="rounded-2xl border border-border bg-card p-5">
            <h2 class="font-display text-lg font-semibold">Recent transactions</h2>
            <p class="text-xs text-muted-foreground mb-4">Shorobor transactions</p>
            <div class="space-y-2 max-h-64 overflow-y-auto">
                @forelse ($recent as $t)
                    <div class="flex items-center justify-between rounded-lg border border-border/60 p-3 text-sm">
                        <div>
                            <div class="font-medium">{{ $t->type }}</div>
                            <div class="text-xs text-muted-foreground">{{ $t->wallet->name }} · {{ $t->occurred_at->format('M d') }}</div>
                        </div>
                        <div class="font-display font-semibold {{ $t->direction === 'in' ? 'text-emerald-500' : 'text-red-500' }}">
                            {{ $t->direction === 'in' ? '+' : '−' }} {{ bdt($t->amount + ($t->direction === 'out' ? $t->fee : 0)) }}
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-muted-foreground">Ekhono kono transaction nei.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

<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">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>

<script>
const chartData = @json($chartData);
const labels = chartData.map(d => d.date);
const inData = chartData.map(d => d.in);
const outData = chartData.map(d => d.out);

const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'In',
                data: inData,
                borderColor: '#22c55e',
                backgroundColor: 'rgba(34, 197, 94, 0.15)',
                fill: true,
                tension: 0.4,
            },
            {
                label: 'Out',
                data: outData,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.15)',
                fill: true,
                tension: 0.4,
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { labels: { color: '#e2e8f0' } }
        },
        scales: {
            x: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } },
            y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } }
        }
    }
});
</script>
@endsection