<x-app-layout>
    <x-slot name="header">{{ __('Expense Categories') }}</x-slot>

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

    <div class="row g-4">
        {{-- Add Form --}}
        <div class="col-12 col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-semibold border-0 pt-3 pb-0">
                    <i class="bi bi-plus-circle me-1 text-primary"></i>{{ __('Add Category') }}
                </div>
                <div class="card-body">
                    <form action="{{ route('settings.expense-categories.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">{{ __('Name') }} *</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <button type="submit" class="btn btn-primary w-100">{{ __('Add') }}</button>
                    </form>
                </div>
            </div>
        </div>

        {{-- List --}}
        <div class="col-12 col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-semibold border-0 pt-3 pb-0">
                    <i class="bi bi-list-ul me-1 text-secondary"></i>{{ __('All Expense Categories') }}
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>{{ __('Name') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($categories as $cat)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $cat->name }}</td>
                                    <td>
                                        <form action="{{ route('settings.expense-categories.toggle', $cat) }}" method="POST" class="d-inline">
                                            @csrf @method('PATCH')
                                            <button type="submit" class="btn btn-sm {{ $cat->is_active ? 'btn-success' : 'btn-outline-secondary' }}">
                                                {{ $cat->is_active ? __('Active') : __('Inactive') }}
                                            </button>
                                        </form>
                                    </td>
                                    <td class="text-end">
                                        <form action="{{ route('settings.expense-categories.destroy', $cat) }}" method="POST" class="d-inline">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('{{ __('Delete this category?') }}')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">{{ __('No expense categories yet.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
