@extends('layouts.app')

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

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

<div class="mx-auto max-w-6xl space-y-6">
    <div class="flex items-end justify-between gap-3">
        <div>
            <h1 class="font-display text-3xl font-semibold tracking-tight">Deals</h1>
            <p class="text-sm text-muted-foreground">bKash cash-in ebong bank receive er hisab</p>
        </div>
        <button onclick="document.getElementById('add-deal-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" /> New deal</button>
    </div>

    @if ($deals->isEmpty())
        <div class="rounded-2xl border border-border p-10 text-center text-sm text-muted-foreground">Kono deal nei. Notun ekta khulun.</div>
    @else
        <div class="grid gap-4 md:grid-cols-2">
            @foreach ($deals as $d)
                @php
                    $cashIn = $d->cashIn();
                    $bankIn = $d->bankIn();
                    $net = $d->net();
                @endphp
                <div class="rounded-2xl border border-border bg-card p-5">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h3 class="font-display text-lg font-semibold truncate">{{ $d->title }}</h3>
                            <p class="text-xs text-muted-foreground">{{ $d->created_at->format('M d, Y') }}</p>
                        </div>
                        <div class="flex items-center gap-1">
                            <form method="POST" action="{{ route('deals.update', $d) }}">
                                @csrf @method('PUT')
                                <input type="hidden" name="status" value="{{ $d->status === 'open' ? 'closed' : 'open' }}">
                                <button type="submit" class="p-2 rounded-md hover:bg-accent text-muted-foreground" title="Toggle status">
                                    @if ($d->status === 'open') <x-icon name="trending-up" class="h-4 w-4" /> @else <x-icon name="check" class="h-4 w-4 text-emerald-500" /> @endif
                                </button>
                            </form>
                            <form method="POST" action="{{ route('deals.destroy', $d) }}" onsubmit="return confirm('Deal 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>
                    </div>

                    <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                        <div class="rounded-xl border border-border/60 p-3">
                            <div class="text-[10px] uppercase text-muted-foreground">bKash out</div>
                            <div class="font-display font-semibold text-red-500">{{ bdt($cashIn) }}</div>
                        </div>
                        <div class="rounded-xl border border-border/60 p-3">
                            <div class="text-[10px] uppercase text-muted-foreground">Bank in</div>
                            <div class="font-display font-semibold text-emerald-500">{{ bdt($bankIn) }}</div>
                        </div>
                    </div>

                    <div class="mt-4 flex items-center justify-between rounded-xl bg-accent/40 px-4 py-3">
                        <span class="text-xs uppercase tracking-wider text-muted-foreground">Net</span>
                        <span class="font-display text-lg font-semibold {{ $net >= 0 ? 'text-emerald-500' : 'text-red-500' }}">{{ $net >= 0 ? '+' : '−' }} {{ bdt(abs($net)) }}</span>
                    </div>

                    @if ($d->note)
                        <p class="mt-3 text-sm text-muted-foreground">{{ $d->note }}</p>
                    @endif

                    <div class="mt-4 flex items-center justify-between text-sm">
                        <span class="rounded-full px-2 py-0.5 text-xs {{ $d->status === 'open' ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground' }}">{{ $d->status }}</span>
                        <a href="{{ route('deals.show', $d) }}" class="inline-flex items-center gap-1 text-xs text-primary hover:underline">Open deal <x-icon name="arrow-right" class="h-3 w-3" /></a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<dialog id="add-deal-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">New deal</h3>
        <form method="POST" action="{{ route('deals.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-medium">Title</label>
                <input type="text" name="title" required placeholder="Rahim vai — 5 July" 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="3" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"></textarea>
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button type="button" onclick="document.getElementById('add-deal-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">Create</button>
            </div>
        </form>
    </div>
</dialog>
@endsection