@extends('layouts.app')

@section('title', 'Accounts')
@section('heading', 'Accounts')

@section('content')
@php
    $currency = config('app.currency_symbol', '₹');
    $totalBalance = $accounts->sum('current_balance');
@endphp

@include('finance.top-submenu')

<x-card>
    <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-sm text-slate-600">Bank, cash, and ledger accounts for your company.</p>
            @if($accounts->total() > 0)
                <p class="mt-1 text-xs text-slate-500">Combined balance: <span class="font-semibold text-slate-800">{{ $currency }}{{ number_format($totalBalance, 2) }}</span></p>
            @endif
        </div>
        <a href="{{ route('accounts.create') }}" class="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover">
            <i class="bi bi-plus-lg"></i> Add account
        </a>
    </div>
    <x-table>
        <x-slot name="head">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Code</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Type</th>
                <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Opening</th>
                <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Current balance</th>
                <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
            </tr>
        </x-slot>
        @forelse($accounts as $acc)
            <tr class="hover:bg-slate-50/80">
                <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-slate-900">{{ $acc->name }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-slate-600">{{ $acc->code ?? '—' }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm capitalize text-slate-600">{{ $acc->type }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-500">{{ $currency }}{{ number_format($acc->opening_balance, 2) }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-right text-sm font-semibold text-slate-800">{{ $currency }}{{ number_format($acc->current_balance, 2) }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                    <a href="{{ route('accounts.edit', $acc) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="px-4 py-10 text-center text-sm text-slate-500">No accounts yet. Add a bank or cash account to start tracking balances.</td></tr>
        @endforelse
    </x-table>
    @if($accounts->hasPages())<div class="mt-4">{{ $accounts->links() }}</div>@endif
</x-card>
@endsection