@extends('layouts.app', [
    'pageTitle' => $title,
])

@section('content')
<div class="mx-auto max-w-2xl">
    <!-- Header -->
    <div class="mb-6">
        <a href="{{ route('expense-categories.index') }}" class="mb-2 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
            <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Kembali
        </a>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
    </div>

    @include('partials.alerts')

    <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <form action="{{ $category->exists ? route('expense-categories.update', $category) : route('expense-categories.store') }}" method="POST">
            @csrf
            @if($category->exists)
                @method('PUT')
            @endif

            <div class="space-y-5">
                <div>
                    <x-form.input name="name" label="Nama Jenis" value="{{ old('name', $category->name) }}" required placeholder="contoh: Listrik, Kasbon, dll"/>
                </div>

                <div>
                    <x-form.textarea name="description" label="Deskripsi" rows="3" placeholder="Deskripsi opsional">{{ old('description', $category->description) }}</x-form.textarea>
                </div>

                <div>
                    <label class="flex items-center gap-2">
                        <input type="checkbox" name="is_active" value="1" 
                               class="h-5 w-5 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
                               {{ old('is_active', $category->is_active ?? true) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Aktif</span>
                    </label>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('expense-categories.index') }}" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                    Batal
                </a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection