@extends('layouts.app')
@section('title', 'Chart of Accounts')
@section('page-title', 'Chart of Accounts')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Accounts list --}}
    <div class="lg:col-span-2 space-y-4">
        @foreach(['asset' => 'Assets', 'liability' => 'Liabilities', 'equity' => 'Equity', 'revenue' => 'Revenue', 'expense' => 'Expenses'] as $type => $label)
        @php $typeAccounts = $accounts->where('account_type', $type); @endphp
        @if($typeAccounts->count())
        <div class="card p-0 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ $label }}</h3>
            </div>
            <table class="w-full text-sm">
                <thead><tr>
                    <th class="table-th w-24">Code</th>
                    <th class="table-th">Account Name</th>
                    <th class="table-th">Sub-Type</th>
                    <th class="table-th text-right">Balance (₹)</th>
                    <th class="table-th text-center">System</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($typeAccounts as $account)
                    <tr class="hover:bg-gray-50">
                        <td class="table-td font-mono text-xs text-gray-500">{{ $account->account_code }}</td>
                        <td class="table-td font-medium">
                            {{ $account->account_name }}
                            @foreach($account->children as $child)
                            <div class="text-xs text-gray-400 ml-3 mt-0.5">↳ {{ $child->account_code }} {{ $child->account_name }}</div>
                            @endforeach
                        </td>
                        <td class="table-td text-xs text-gray-500 capitalize">{{ str_replace('_',' ', $account->account_sub_type ?? '') }}</td>
                        <td class="table-td text-right font-semibold">
                            {{ number_format($account->current_balance, 2) }}
                        </td>
                        <td class="table-td text-center">
                            @if($account->is_system)
                            <span class="badge-gray text-xs">System</span>
                            @else
                            <span class="text-gray-300">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
        @endforeach
    </div>

    {{-- Add new account --}}
    <div class="card sticky top-4">
        <h3 class="text-sm font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Add New Account</h3>
        <form method="POST" action="{{ route('accounting.accounts.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="form-label">Account Code</label>
                <input type="text" name="account_code" class="form-input text-sm" placeholder="e.g. 1100">
            </div>
            <div>
                <label class="form-label">Account Name <span class="text-red-500">*</span></label>
                <input type="text" name="account_name" class="form-input text-sm" required placeholder="e.g. Petty Cash">
            </div>
            <div>
                <label class="form-label">Account Type <span class="text-red-500">*</span></label>
                <select name="account_type" class="form-input text-sm" required
                        x-data x-on:change="
                            const map = {asset:'debit',expense:'debit',liability:'credit',equity:'credit',revenue:'credit'};
                            $el.closest('form').querySelector('[name=normal_balance]').value = map[$el.value] || 'debit';
                        ">
                    <option value="">— Select —</option>
                    <option value="asset">Asset</option>
                    <option value="liability">Liability</option>
                    <option value="equity">Equity</option>
                    <option value="revenue">Revenue</option>
                    <option value="expense">Expense</option>
                </select>
            </div>
            <div>
                <label class="form-label">Opening Balance (₹)</label>
                <input type="number" name="opening_balance" value="0" min="0" step="0.01" class="form-input text-sm">
            </div>
            <div>
                <label class="form-label">Normal Balance</label>
                <select name="normal_balance" class="form-input text-sm">
                    <option value="debit">Debit</option>
                    <option value="credit">Credit</option>
                </select>
            </div>
            <div>
                <label class="form-label">Description</label>
                <textarea name="description" rows="2" class="form-input text-sm" placeholder="Optional"></textarea>
            </div>
            <button type="submit" class="btn-primary w-full justify-center">Add Account</button>
        </form>
    </div>
</div>
@endsection