@extends('layouts.app')
@section('title','Expense Categories')
@section('content')
<x-ui.page-toolbar title="Expense Categories" description="Configure operating-expense classifications used for approvals, recurring bills and financial reports." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Expenses','url'=>route('expenses.index')],['label'=>'Categories']]" />

<div class="grid gap-4 lg:grid-cols-3">
    <form method="POST" action="{{ route('expense-categories.store') }}" class="mf-card mf-card-body" data-standard-form>@csrf
        <h2 class="font-semibold">Add category</h2>
        <div class="mt-4 space-y-3">
            <div><label class="mf-label">Business</label><select class="mf-select" name="business_id" required>@foreach($businesses as $business)<option value="{{ $business->id }}" @selected((string)old('business_id')===(string)$business->id)>{{ $business->name }}</option>@endforeach</select>@error('business_id')<div class="mf-error">{{ $message }}</div>@enderror</div>
            <div><label class="mf-label">Name</label><input class="mf-input" name="name" value="{{ old('name') }}" required>@error('name')<div class="mf-error">{{ $message }}</div>@enderror</div>
            <div><label class="mf-label">Code</label><input class="mf-input" name="code" value="{{ old('code') }}" placeholder="Optional">@error('code')<div class="mf-error">{{ $message }}</div>@enderror</div>
            <div><label class="mf-label">Description</label><textarea class="mf-textarea" name="description" rows="3">{{ old('description') }}</textarea></div>
            <button class="mf-btn mf-btn-primary w-full">Create category</button>
        </div>
    </form>

    <div class="mf-card lg:col-span-2">
        <div class="mf-table-frame border-0"><table class="mf-table" data-standard-table>
            <thead><tr><th>Name</th><th>Code</th><th>Description</th><th>Status</th><th></th></tr></thead>
            <tbody>
            @forelse($categories as $category)
                <tr>
                    <td colspan="5" class="p-0">
                        <form method="POST" action="{{ route('expense-categories.update',$category) }}" class="grid gap-2 p-3 md:grid-cols-[1fr_.7fr_1.8fr_.8fr_auto]">@csrf @method('PUT')
                            <input class="mf-input" name="name" value="{{ $category->name }}" required>
                            <input class="mf-input" name="code" value="{{ $category->code }}">
                            <input class="mf-input" name="description" value="{{ $category->description }}">
                            <select class="mf-select" name="status"><option value="active" @selected($category->status==='active')>Active</option><option value="inactive" @selected($category->status==='inactive')>Inactive</option></select>
                            <button class="mf-btn">Save</button>
                        </form>
                    </td>
                </tr>
            @empty<tr><td colspan="5" class="text-center text-muted-foreground">No expense categories are configured.</td></tr>@endforelse
            </tbody>
        </table></div>
    </div>
</div>
@endsection