@extends('layouts.app')
@section('title', 'Expense categories')

@section('content')
<x-page-header title="Expense categories" subtitle="Group your expenses for reporting">
    <a href="{{ route('expenses.index') }}" class="btn btn-ghost"><i class="bi bi-arrow-left" aria-hidden="true"></i> Back to expenses</a>
</x-page-header>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="table-wrap">
                <table class="table table-modern table-cards align-middle">
                    <thead><tr><th scope="col">Name</th><th scope="col" class="num">Entries</th><th scope="col" class="num">Total spent</th><th scope="col"><span class="visually-hidden">Actions</span></th></tr></thead>
                    <tbody>
                    @forelse ($categories as $c)
                        <tr>
                            <td class="cell-title" data-label="Name">
                                <form method="POST" action="{{ route('expense-categories.update', $c) }}" class="d-flex gap-2" data-validate data-no-guard>
                                    @csrf @method('PUT')
                                    <div class="field flex-grow-1">
                                        <input type="text" name="name" value="{{ $c->name }}" class="form-control form-control-sm" required maxlength="100" data-label="Category name" aria-label="Category name">
                                        <div class="invalid-feedback"></div>
                                    </div>
                                    <button class="btn btn-sm btn-ghost" title="Save name" aria-label="Save name"><i class="bi bi-check-lg"></i></button>
                                </form>
                            </td>
                            <td class="num" data-label="Entries">{{ $c->expenses_count }}</td>
                            <td class="num fw-semibold" data-label="Total spent">{{ money($c->expenses_total) }}</td>
                            <td class="actions-col">
                                @if ($c->expenses_count == 0)
                                    @can('expense_categories.manage')
                                    <x-delete-button :action="route('expense-categories.destroy', $c)" label="" :title="'Delete '.$c->name.'?'" confirm="This category has no expenses, so nothing else is affected." />
                                    @endcan
                                @else
                                    <a href="{{ route('expenses.index', ['category_id' => $c->id]) }}" class="btn btn-sm btn-ghost">View</a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr class="empty-row"><td colspan="4"><x-empty icon="tags" title="No categories yet" text="Add a category to start grouping expenses." /></td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <form method="POST" action="{{ route('expense-categories.store') }}" class="card card-body" data-validate data-no-guard>
            @csrf
            <h2 class="h6 mb-3">New category</h2>
            <div class="field mb-3">
                <label class="form-label" for="new-name">Name<span class="req" aria-hidden="true">*</span></label>
                <input type="text" id="new-name" name="name" class="form-control @error('name') is-invalid @enderror" required maxlength="100" placeholder="e.g. Insurance" data-label="Category name" value="{{ old('name') }}">
                <div class="invalid-feedback {{ $errors->has('name') ? 'is-visible' : '' }}">{{ $errors->first('name') }}</div>
            </div>
            <button class="btn btn-primary">Add category</button>
        </form>
    </div>
</div>
@endsection