@php $prefix = isset($editing) && $editing ? 'edit' : 'add'; @endphp

<div class="mb-3">
    <label class="form-label fw-semibold">ক্যাটাগরির নাম <span class="text-danger">*</span></label>
    <input type="text" name="name"
        value="{{ old('name', $cat?->name ?? '') }}"
        class="form-control @error('name') is-invalid @enderror"
        placeholder="যেমন: বেতন, জ্বালানি..." required
        oninput="updatePreview('{{ $prefix }}')">
    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
</div>

<div class="mb-3">
    <label class="form-label fw-semibold">রঙ <span class="text-danger">*</span></label>
    <div class="d-flex flex-wrap gap-2">
        @foreach($colors as $val => $label)
        <div>
            <input type="radio" class="btn-check" name="color" id="{{ $prefix }}_color_{{ $val }}"
                value="{{ $val }}"
                {{ old('color', $cat?->color ?? 'secondary') === $val ? 'checked' : '' }}
                onchange="updatePreview('{{ $prefix }}')">
            <label class="btn btn-sm btn-{{ $val }} px-3" for="{{ $prefix }}_color_{{ $val }}">
                {{ $label }}
            </label>
        </div>
        @endforeach
    </div>
    @error('color') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
</div>

<div class="mb-3">
    <label class="form-label fw-semibold">আইকন <span class="text-danger">*</span></label>
    <div class="input-group">
        <span class="input-group-text" id="{{ $prefix }}IconPreviewSpan">
            <i class="bi bi-{{ old('icon', $cat?->icon ?? 'dash') }}" id="{{ $prefix }}IconSpan"></i>
        </span>
        <input type="text" name="icon"
            id="{{ $prefix }}IconInput"
            value="{{ old('icon', $cat?->icon ?? 'dash') }}"
            class="form-control @error('icon') is-invalid @enderror"
            placeholder="bootstrap icon নাম, যেমন: wallet2"
            oninput="updateIconPreview('{{ $prefix }}'); updatePreview('{{ $prefix }}')" required>
        @error('icon') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <small class="text-muted">
        <a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none">
            <i class="bi bi-box-arrow-up-right me-1"></i>Bootstrap Icons থেকে নাম কপি করুন
        </a>
    </small>

    {{-- Quick icon suggestions --}}
    <div class="mt-2 d-flex flex-wrap gap-1">
        @foreach($icons as $iconName => $iconLabel)
        <button type="button" class="btn btn-sm btn-light border"
            onclick="setIcon('{{ $prefix }}', '{{ $iconName }}')"
            title="{{ $iconLabel }}">
            <i class="bi bi-{{ $iconName }}"></i>
            <span class="small ms-1">{{ $iconLabel }}</span>
        </button>
        @endforeach
    </div>
</div>

@if(isset($editing) && $editing)
<div class="mb-3">
    <label class="form-label fw-semibold">স্ট্যাটাস</label>
    <select name="status" class="form-select">
        <option value="active"   {{ old('status', $cat?->status ?? 'active')   === 'active'   ? 'selected' : '' }}>সক্রিয়</option>
        <option value="inactive" {{ old('status', $cat?->status ?? 'active')   === 'inactive' ? 'selected' : '' }}>নিষ্ক্রিয়</option>
    </select>
</div>
@endif

{{-- Live Preview --}}
<div class="mt-3 p-3 bg-light rounded text-center">
    <div class="text-muted small mb-2">প্রিভিউ</div>
    <div id="{{ $prefix }}Preview">
        <span class="badge bg-{{ old('color', $cat?->color ?? 'secondary') }} rounded-pill fs-6 px-3 py-2">
            <i class="bi bi-{{ old('icon', $cat?->icon ?? 'dash') }} me-1"></i>
            {{ old('name', $cat?->name ?? 'ক্যাটাগরি নাম') }}
        </span>
    </div>
</div>

@once
@push('scripts')
<script>
function setIcon(prefix, iconName) {
    const input = document.getElementById(`${prefix}IconInput`);
    input.value = iconName;
    updateIconPreview(prefix);
    updatePreview(prefix);
}

function updateIconPreview(prefix) {
    const input = document.getElementById(`${prefix}IconInput`);
    const span  = document.getElementById(`${prefix}IconSpan`);
    if (span && input) {
        span.className = `bi bi-${input.value}`;
    }
}
</script>
@endpush
@endonce