@php($category = $category ?? null)

<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label">Name</label>
        <input type="text" name="name" id="cat-name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $category->name ?? '') }}" required>
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label">Key (slug)</label>
        <input type="text" name="slug" id="cat-slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $category->slug ?? '') }}" placeholder="e.g. commercial">
        <small class="text-muted">Lowercase letters, numbers and underscores. Generated from the name if left blank.</small>
        @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
        <label class="form-label">Description</label>
        <input type="text" name="description" class="form-control" value="{{ old('description', $category->description ?? '') }}">
    </div>
    <div class="col-12">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="cat-active" {{ old('is_active', $category->is_active ?? true) ? 'checked' : '' }}>
            <label class="form-check-label" for="cat-active">Active</label>
        </div>
    </div>
</div>

<div class="mt-3">
    <button type="submit" class="btn btn-yellow"><i class="bi bi-save"></i> Save</button>
    <a href="{{ route('categories.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

@push('scripts')
<script>
(function () {
    var nameEl = document.getElementById('cat-name');
    var slugEl = document.getElementById('cat-slug');
    if (!nameEl || !slugEl) return;
    slugEl.addEventListener('input', function () { slugEl.dataset.touched = '1'; });
    nameEl.addEventListener('input', function () {
        if (slugEl.dataset.touched === '1') return;
        slugEl.value = nameEl.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
    });
})();
</script>
@endpush