@extends('layouts.app')

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

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-journal-bookmark-fill me-2"></i>Chart of Accounts</h4>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAccountModal">
            <i class="bi bi-plus-lg me-1"></i> Add Account
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Account Name</th>
                        <th>Type</th>
                        <th class="text-end">Balance</th>
                        <th>System</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tree as $root)
                        {{-- Parent row --}}
                        <tr class="fw-bold" style="background: rgba(var(--bs-primary-rgb), 0.05);">
                            <td>{{ $root->account_code }}</td>
                            <td>{{ $root->account_name }}</td>
                            <td><span
                                    class="badge bg-{{ match ($root->account_type) { 'asset' => 'info', 'liability' => 'warning', 'equity' => 'secondary', 'revenue' => 'success', 'expense' => 'danger'} }}">{{ ucfirst($root->account_type) }}</span>
                            </td>
                            <td class="text-end">৳ {{ number_format($root->balance, 2) }}</td>
                            <td>{!! $root->is_system ? '<i class="bi bi-lock-fill text-muted"></i>' : '' !!}</td>
                            <td>
                                <span class="badge bg-{{ $root->is_active ? 'success' : 'secondary' }}">
                                    {{ $root->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <form action="{{ route('accounting.chart.toggle', $root) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-outline-secondary"
                                        title="{{ $root->is_active ? 'Deactivate' : 'Activate' }}">
                                        <i class="bi bi-{{ $root->is_active ? 'eye-slash' : 'eye' }}"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {{-- Child rows --}}
                        @foreach ($root->childAccounts ?? [] as $child)
                            <tr>
                                <td class="ps-4">↳ {{ $child->account_code }}</td>
                                <td class="ps-4">{{ $child->account_name }}</td>
                                <td><span
                                        class="badge bg-{{ match ($child->account_type) { 'asset' => 'info', 'liability' => 'warning', 'equity' => 'secondary', 'revenue' => 'success', 'expense' => 'danger'} }}">{{ ucfirst($child->account_type) }}</span>
                                </td>
                                <td class="text-end">৳ {{ number_format($child->balance, 2) }}</td>
                                <td>{!! $child->is_system ? '<i class="bi bi-lock-fill text-muted"></i>' : '' !!}</td>
                                <td>
                                    <span class="badge bg-{{ $child->is_active ? 'success' : 'secondary' }}">
                                        {{ $child->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td>
                                    <form action="{{ route('accounting.chart.toggle', $child) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-{{ $child->is_active ? 'eye-slash' : 'eye' }}"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No accounts found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Add Account Modal --}}
    <div class="modal fade" id="addAccountModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('accounting.chart.store') }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Account Head</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Account Code *</label>
                            <input type="text" name="account_code" class="form-control" required maxlength="20"
                                placeholder="e.g., 1040">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Account Name *</label>
                            <input type="text" name="account_name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Type *</label>
                            <select name="account_type" class="form-select" required>
                                <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 class="mb-3">
                            <label class="form-label">Parent Account</label>
                            <select name="parent_code" class="form-select">
                                <option value="">— Root (No Parent) —</option>
                                @foreach ($accounts as $acct)
                                    <option value="{{ $acct->account_code }}">{{ $acct->account_code }} —
                                        {{ $acct->account_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Account</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection