@extends('layout.main')
@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Chart of Accounts
        </h2> 
        <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
            <div class="w-full overflow-x-auto">
                <x-table.table datatable>
                    <x-table.head>
                        <th>Account Number</th>
                        <th>Account Name</th>
                        <th>Account Type</th>
                        <th>Balance ({{getCurrencyCode()}})</th>
                        <th>Description</th>
                    </x-table.head>
                    <x-table.body>
                        @forelse ($accounts as $account)
                            <x-table.row>
                                <x-table.cell>
                                    <span class="font-mono text-sm font-medium">{{ $account->account_code }}</span>
                                </x-table.cell>
                                <x-table.cell>
                                    <span
                                        class="font-medium text-gray-900 dark:text-gray-100">{{ $account->account_name }}</span>
                                </x-table.cell>
                                <x-table.cell>
                                    @php
                                        $typeColors = [
                                            'asset' => 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100',
                                            'liability' => 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100',
                                            'equity' => 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100',
                                            'revenue' => 'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100',
                                            'income' => 'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100',
                                            'expense' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100',
                                        ];
                                    @endphp
                                    <span
                                        class="px-2 py-1 text-xs font-semibold rounded-full {{ $typeColors[strtolower($account->type)] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
                                        {{ ucfirst($account->type) }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell> 
                                    <span
                                        class="font-mono text-sm font-medium {{ $account->balance < 0 ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                                        {{ $account->balance < 0 ? '-' : '' }}{{ formatAmount(abs($account->balance)) }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell>
                                    @if($account->description)
                                        <span class="text-sm text-gray-600 dark:text-gray-400" title="{{ $account->description }}">
                                            {{ Str::limit($account->description, 50) }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 text-sm italic">No description</span>
                                    @endif
                                </x-table.cell>
                            </x-table.row>
                        @empty
                            <x-table.row>
                                <x-table.cell colspan="5" class="text-center py-8">
                                    <div class="flex flex-col items-center justify-center">
                                        <i class="fa fa-chart-bar text-4xl text-gray-400 mb-4"></i>
                                        <p class="text-gray-500 dark:text-gray-400 text-lg">No active accounts found</p>
                                        <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">
                                            There are currently no active accounts in the system.
                                        </p>
                                    </div>
                                </x-table.cell>
                            </x-table.row>
                        @endforelse
                    </x-table.body>
                </x-table.table>
            </div>
        </div>

        @if($accounts->count() > 0)
            <!-- Summary Cards -->
            <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4 mt-6">
                @php
                    $totalAssets = $accounts->where('type', 'asset')->sum('balance');
                    $totalLiabilities = $accounts->where('type', 'liability')->sum('balance');
                    $totalEquity = $accounts->where('type', 'equity')->sum('balance');
                    $totalRevenue = $accounts->whereIn('type', ['revenue', 'income'])->sum('balance');
                @endphp

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Total Assets</h4>
                    <p class="text-lg font-semibold text-green-600 dark:text-green-400">
                        {{ formatCurrencyDecimals($totalAssets) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Total Liabilities</h4>
                    <p class="text-lg font-semibold text-red-600 dark:text-red-400">
                        {{ formatCurrencyDecimals($totalLiabilities) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Total Equity</h4>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                        {{ formatCurrencyDecimals($totalEquity) }}
                    </p>
                </div>

                <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                    <h4 class="mb-2 font-medium text-gray-600 dark:text-gray-400">Total Revenue</h4>
                    <p class="text-lg font-semibold text-purple-600 dark:text-purple-400">
                        {{ formatCurrencyDecimals($totalRevenue) }}
                    </p>
                </div>
            </div>
        @endif
    </div>
@endsection