@extends('layouts.app')
@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-semibold">Chart of Accounts — Tree</h1>
    <div class="flex gap-2">
        <a href="{{ route('coa.index', $project) }}" class="px-4 py-2 rounded-xl bg-gray-800 text-white">Table View</a>
        <a href="{{ route('coa.create', $project) }}" class="px-4 py-2 rounded-xl bg-[#F59E0B] text-white">Add Root Account</a>
    </div>
    </div>
@if (session('success'))
    <div class="mb-4 px-4 py-3 rounded-xl bg-green-50 text-green-700 border border-green-200">{{ session('success') }}</div>
@endif
@if (session('error'))
    <div class="mb-4 px-4 py-3 rounded-xl bg-red-50 text-red-700 border border-red-200">{{ session('error') }}</div>
@endif
<div class="bg-white rounded-2xl border border-gray-100 shadow p-4">
    <style>
        .coa-tree details > summary { cursor: pointer; padding: .25rem .5rem; border-radius: .5rem; }
        .coa-tree details[open] > summary { background: #f8fafc; }
        .coa-tree ul { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #e5e7eb; }
    </style>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="coa-tree">
            @php
                $render = function($node) use (&$render, $project) {
                    $hasChildren = $node->children->isNotEmpty();
                    echo '<li class="mb-1">';
                    if ($hasChildren) {
                        echo '<details>';
                        echo '<summary class="flex items-center gap-2"><span class="font-mono text-xs text-gray-600">'. e($node->code) .'</span><span class="font-medium">'. e($node->name) .'</span></summary>';
                        echo '<ul class="mt-1">';
                        foreach ($node->children as $child) { $render($child); }
                        echo '</ul></details>';
                    } else {
                        echo '<div class="flex items-center gap-2"><span class="font-mono text-xs text-gray-600">'. e($node->code) .'</span><span>'. e($node->name) .'</span>';
                        echo '<span class="ml-auto text-xs text-gray-500">'. number_format($node->balance, 2) .'</span>';
                        echo '<a class="ml-3 text-[#1B3A6B] text-xs" href="'. e(route('coa.edit', [$project, $node])) .'">Edit</a>';
                        echo '<a class="ml-3 text-[#F59E0B] text-xs" href="'. e(route('coa.create', [$project, 'parent_id' => $node->id])) .'">Add</a></div>';
                    }
                    echo '</li>';
                };
            @endphp
            <ul class="space-y-1">
                @foreach($roots as $root)
                    @php $render($root); @endphp
                @endforeach
            </ul>
        </div>
        <div class="text-sm text-gray-600">
            <div class="font-semibold mb-2">Tips</div>
            <ul class="list-disc pl-5 space-y-1">
                <li>Click a group to expand/collapse its child accounts.</li>
                <li>Use “Add” to create a child under a selected account.</li>
                <li>Switch to table view for bulk actions and balances.</li>
            </ul>
        </div>
    </div>
</div>
@endsection