@php
    $isEdit = isset($kategori);
@endphp

<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label">Nama Kategori <span class="text-danger">*</span></label>
        <input id="nama-kategori" type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
            value="{{ old('nama', $kategori->nama ?? '') }}" placeholder="Contoh: Gaji Pegawai, Sewa Kantor">
        @error('nama')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">Kode</label>
        <input id="kode-kategori" type="text" name="kode" class="form-control text-mono @error('kode') is-invalid @enderror"
            value="{{ old('kode', $kategori->kode ?? '') }}" placeholder="Mis: GAJI, SEWA">
        @error('kode')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <small class="text-muted">Auto format: huruf besar, spasi jadi `_`.</small>
    </div>

    <div class="col-md-3 d-flex align-items-end">
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="is_aktif" name="is_aktif" value="1"
                {{ old('is_aktif', $kategori->is_aktif ?? 1) ? 'checked' : '' }}>
            <label class="form-check-label" for="is_aktif">
                Kategori aktif
            </label>
        </div>
    </div>

    <div class="col-12">
        <label class="form-label">Keterangan</label>
        <textarea name="keterangan" rows="3" class="form-control @error('keterangan') is-invalid @enderror"
            placeholder="Catatan tambahan atau deskripsi kategori...">{{ old('keterangan', $kategori->keterangan ?? '') }}</textarea>
        @error('keterangan')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
</div>

@once
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const namaEl = document.getElementById('nama-kategori');
                const kodeEl = document.getElementById('kode-kategori');
                if (!namaEl || !kodeEl) return;

                let kodeTouched = kodeEl.value.trim() !== '';

                kodeEl.addEventListener('input', function() {
                    kodeTouched = true;
                    const v = String(kodeEl.value || '').toUpperCase().replace(/\s+/g, '_').replace(/[^A-Z0-9_\-]/g, '');
                    kodeEl.value = v;
                });

                namaEl.addEventListener('input', function() {
                    if (kodeTouched) return;
                    const base = String(namaEl.value || '').trim().toUpperCase();
                    const kode = base.replace(/\s+/g, '_').replace(/[^A-Z0-9_\-]/g, '').slice(0, 24);
                    kodeEl.value = kode;
                });
            });
        </script>
    @endpush
@endonce