@extends('layouts.main')

@section('title', 'Chart of Accounts')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Chart of Accounts</h2>
        <p class="text-gray-500 dark:text-gray-400">Manage your account structure</p>
    </div>
    <a href="{{ route('accounts.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
        <i class="fas fa-plus mr-2"></i> Add Account
    </a>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4 flex items-center">
        <i class="fas fa-check-circle mr-2"></i>
        {{ session('success') }}
    </div>
@endif

@php
$typeColors = [
    'asset' => 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800',
    'liability' => 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800',
    'equity' => 'bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800',
    'revenue' => 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800',
    'expense' => 'bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-800',
];
$typeGroups = $accounts->groupBy('type');
@endphp

@foreach(['asset', 'liability', 'equity', 'revenue', 'expense'] as $type)
    @if(isset($typeGroups[$type]) && $typeGroups[$type]->count() > 0)
    <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <span class="px-3 py-1 rounded-full text-sm border {{ $typeColors[$type] ?? 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300' }}">
                {{ ucfirst($type) }}
            </span>
            <span class="ml-2 text-gray-500 dark:text-gray-400 text-sm">({{ $typeGroups[$type]->count() }} accounts)</span>
        </h3>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                        <th class="px-6 py-4 font-semibold">Code</th>
                        <th class="px-6 py-4 font-semibold">Name</th>
                        <th class="px-6 py-4 font-semibold">Type</th>
                        <th class="px-6 py-4 font-semibold">Nature</th>
                        <th class="px-6 py-4 font-semibold text-right">Balance</th>
                        <th class="px-6 py-4 font-semibold">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @foreach($typeGroups[$type] as $account)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4">
                            <span class="font-mono text-gray-600 dark:text-gray-400">{{ $account->code }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('accounts.show', $account) }}" class="font-medium text-gray-800 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400">
                                {{ $account->name }}
                            </a>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-3 py-1 rounded-full text-xs font-medium border {{ $typeColors[$account->type] }}">
                                {{ ucfirst($account->type) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ ucfirst($account->nature) }}</td>
                        <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">
                            ${{ number_format($account->balance, 2) }}
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('accounts.show', $account) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('accounts.edit', $account) }}" class="text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-300 mr-3">
                                <i class="fas fa-edit"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
@endforeach

@if($accounts->isEmpty())
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-12 text-center">
    <i class="fas fa-book text-gray-300 dark:text-gray-600 text-5xl mb-4"></i>
    <p class="text-gray-500 dark:text-gray-400 text-lg mb-4">No accounts found</p>
    <a href="{{ route('accounts.create') }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">
        Create your first account
    </a>
</div>
@endif
@endsection