@extends('layouts.app')

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

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

<div class="mx-auto max-w-5xl space-y-6">
    <div class="flex items-end justify-between">
        <div>
            <h1 class="font-display text-3xl font-semibold tracking-tight">Wallets</h1>
            <p class="text-sm text-muted-foreground">bKash, Nagad, Rocket, Bank — jotogulo dorkar add korun</p>
        </div>
        <button onclick="document.getElementById('add-wallet-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 wallet</button>
    </div>

    @if (count($typeTotals) > 0)
        <div class="grid gap-3 sm:grid-cols-2 md:grid-cols-4">
            @foreach ($typeTotals as $type => $total)
                <div class="rounded-2xl border border-border bg-card p-4">
                    <div class="text-[10px] uppercase tracking-wider text-muted-foreground">{{ $type }} total</div>
                    <div class="mt-1 font-display text-xl font-semibold">{{ bdt($total) }}</div>
                </div>
            @endforeach
        </div>
    @endif

    @if ($wallets->isEmpty())
        <div class="grid place-items-center rounded-2xl border border-dashed border-border/70 p-16 text-center">
            <p class="text-sm text-muted-foreground">Ekhono kono wallet add koreni.</p>
            <button onclick="document.getElementById('add-wallet-modal').showModal()" class="mt-3 inline-flex items-center gap-1 rounded-md border border-border px-3 py-2 text-sm"><x-icon name="plus" class="h-4 w-4" /> Add wallet</button>
        </div>
    @else
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($wallets as $w)
                <div class="relative overflow-hidden rounded-2xl border border-border bg-card p-5">
                    <div class="absolute inset-x-0 top-0 h-1" style="background: {{ $w->color }}"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex items-center gap-3">
                            <div class="grid h-11 w-11 place-items-center rounded-xl font-display text-base font-bold text-white" style="background: {{ $w->color }}">
                                {{ strtoupper($w->name[0] ?? 'W') }}
                            </div>
                            <div>
                                <div class="font-medium">{{ $w->name }}</div>
                                <div class="text-xs uppercase tracking-wider text-muted-foreground">{{ $w->type }}</div>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('wallets.destroy', $w) }}" onsubmit="return confirm('Wallet delete korben?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="p-2 rounded-md hover:bg-accent text-muted-foreground"><x-icon name="trash" class="h-4 w-4" /></button>
                        </form>
                    </div>
                    @if ($w->account_number)
                        <div class="mt-4 rounded-lg bg-background/40 px-3 py-2 font-mono text-sm">{{ $w->account_number }}</div>
                    @endif
                    <div class="mt-4 text-xs text-muted-foreground">Current balance</div>
                    <div class="font-display text-2xl font-semibold">{{ bdt($w->currentBalance()) }}</div>
                    <div class="mt-1 text-[11px] text-muted-foreground">Opening: {{ bdt($w->opening_balance) }}</div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<dialog id="add-wallet-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 wallet</h3>
        <form method="POST" action="{{ route('wallets.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-medium">Naam</label>
                <input type="text" name="name" required placeholder="Personal bKash" 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">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="bkash">bKash</option>
                    <option value="nagad">Nagad</option>
                    <option value="rocket">Rocket</option>
                    <option value="upay">Upay</option>
                    <option value="bank">Bank</option>
                    <option value="cash">Cash</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium">Account number</label>
                <input type="text" name="account_number" 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">Opening balance</label>
                <input type="number" step="0.01" name="opening_balance" value="0" required 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-wallet-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>
@endsection