@extends('layouts.app')
@section('title', 'Bank Book')
@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Cash & Bank' => route('cash.index'), 'Bank Book' => null]])
@endsection
@section('content')
<div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Bank Book</h1>
            <p class="text-sm text-slate-500 mt-1">{{ $account->name ?? '' }} — {{ $from ?? '' }} to {{ $to ?? '' }}</p>
        </div>
        <x-button variant="outline" icon="printer">Print</x-button>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <x-stat-card title="Opening Balance" :value="$opening ?? 0" icon="circle-dollar-sign" iconBg="info" />
        <x-stat-card title="Total Receipts" :value="$total_receipt ?? 0" icon="plus-circle" iconBg="success" />
        <x-stat-card title="Total Payments" :value="$total_payment ?? 0" icon="minus-circle" iconBg="danger" />
        <x-stat-card title="Closing Balance" :value="$closing ?? 0" icon="landmark" iconBg="primary" />
    </div>

    <x-card :padding="false">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200">
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase text-slate-500">Date</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase text-slate-500">Voucher</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase text-slate-500">Particulars</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase text-slate-500">Receipt</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase text-slate-500">Payment</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase text-slate-500">Balance</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr class="bg-slate-50 font-semibold">
                        <td colspan="3" class="px-4 py-3 text-sm">Opening Balance</td>
                        <td class="px-4 py-3 text-right">—</td>
                        <td class="px-4 py-3 text-right">—</td>
                        <td class="px-4 py-3 text-right font-bold counter-num">৳{{ number_format($opening ?? 0) }}</td>
                    </tr>
                    @forelse(($entries ?? []) as $e)
                    <tr class="hover:bg-slate-50/50">
                        <td class="px-4 py-3 text-xs text-slate-500">{{ \Carbon\Carbon::parse($e->date)->format('d M Y') }}</td>
                        <td class="px-4 py-3 text-xs font-mono font-semibold text-slate-700">{{ $e->voucher_no }}</td>
                        <td class="px-4 py-3 text-sm">{{ $e->party ?? $e->description ?? '—' }}</td>
                        <td class="px-4 py-3 text-right text-emerald-600 font-semibold counter-num">{{ $e->receipt > 0 ? '৳' . number_format($e->receipt) : '—' }}</td>
                        <td class="px-4 py-3 text-right text-rose-600 font-semibold counter-num">{{ $e->payment > 0 ? '৳' . number_format($e->payment) : '—' }}</td>
                        <td class="px-4 py-3 text-right font-bold counter-num">৳{{ number_format($e->balance) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-6 text-slate-500">No entries.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-card>
</div>
@endsection
