@extends('layouts.admin')
@section('title','Expense Categories')
@section('page-title','Expense Categories')
@section('content')
<div class="grid-2" style="gap:1.5rem;align-items:start;">
    <div>
        <div class="page-header">
            <h1>Categories</h1>
        </div>
        <div class="card">
            <div style="overflow-x:auto;">
                <table>
                    <thead><tr><th>Category</th><th>Expenses</th><th>Actions</th></tr></thead>
                    <tbody>
                    @forelse($categories as $cat)
                    <tr>
                        <td>
                            <span style="display:inline-flex;align-items:center;gap:.4rem;">
                                <span style="width:12px;height:12px;border-radius:50%;background:{{ $cat->color }};display:inline-block;"></span>
                                {{ $cat->icon }} {{ $cat->name }}
                            </span>
                        </td>
                        <td>{{ $cat->expenses_count }}</td>
                        <td>
                            <form method="POST" action="{{ route('admin.accounting.categories.destroy',$cat) }}" onsubmit="return confirm('Delete {{ addslashes($cat->name) }}?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-danger btn-sm" {{ $cat->expenses_count > 0 ? 'disabled title=Has expenses' : '' }}>Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="3" style="text-align:center;color:#7A6058;padding:1.5rem;">No categories yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div>
        <div class="page-header"><h1>Add Category</h1></div>
        <div class="card">
            <div class="card-body">
                @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
                <form method="POST" action="{{ route('admin.accounting.categories.store') }}">
                    @csrf
                    <div class="form-group">
                        <label>Category Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Supplies & Materials">
                    </div>
                    <div class="grid-2" style="gap:1rem;">
                        <div class="form-group">
                            <label>Colour</label>
                            <input type="color" name="color" value="{{ old('color','#8B3252') }}" style="width:100%;height:40px;padding:2px;border:1.5px solid #E8D5C4;border-radius:.375rem;">
                        </div>
                        <div class="form-group">
                            <label>Icon (emoji)</label>
                            <input type="text" name="icon" value="{{ old('icon','📦') }}" maxlength="4" placeholder="📦">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;">Add Category</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection