@csrf
@php
    $isEdit = isset($category);
    $model  = $isEdit ? $category : null;
@endphp

<div class="row g-4">

    {{-- اسم الفئة --}}
    <div class="col-md-8">
        <label class="form-label fw-semibold">
            <i class="ti ti-tag me-1 text-danger"></i>اسم الفئة
            <span class="text-danger">*</span>
        </label>
        <input
            type="text"
            name="name_ar"
            class="form-control form-control-lg @error('name_ar') is-invalid @enderror"
            value="{{ old('name_ar', $model?->name_ar) }}"
            placeholder="مثال: مصاريف الشحن والنقل — مصاريف الإيجار"
            required
            maxlength="255"
            autofocus
        >
        @error('name_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <div class="form-text text-muted">
            <i class="ti ti-info-circle me-1"></i>
            اختر اسماً واضحاً يعبّر عن نوع المصروف (مثل: كهرباء، إيجار، رواتب، نقل بضاعة...).
        </div>
    </div>

    {{-- الحالة --}}
    <div class="col-md-4">
        <label class="form-label fw-semibold d-block">
            <i class="ti ti-toggle-left me-1 text-success"></i>الحالة
        </label>
        <div class="mt-2 p-3 border rounded-3 bg-light">
            <div class="form-check form-switch form-check-lg mb-0">
                <input
                    class="form-check-input"
                    type="checkbox"
                    id="is_active"
                    name="is_active"
                    value="1"
                    @checked(old('is_active', $model?->is_active ?? true))
                    role="switch"
                >
                <label class="form-check-label fw-semibold" for="is_active">
                    <span class="text-success" id="status-label">
                        {{ old('is_active', $model?->is_active ?? true) ? 'نشط ومفعّل' : 'معطل' }}
                    </span>
                </label>
            </div>
            <div class="form-text mt-1">الفئات النشطة فقط تظهر عند إنشاء مصروف جديد.</div>
        </div>
    </div>

    {{-- الملاحظات --}}
    <div class="col-12">
        <label class="form-label fw-semibold">
            <i class="ti ti-notes me-1 text-info"></i>ملاحظات / وصف الفئة
        </label>
        <textarea
            name="notes_ar"
            rows="3"
            class="form-control @error('notes_ar') is-invalid @enderror"
            placeholder="أضف وصفاً توضيحياً للفئة — مثال: تشمل هذه الفئة جميع تكاليف نقل الألواح من المصنع للمستودع..."
            maxlength="2000"
            id="notes_ar"
        >{{ old('notes_ar', $model?->notes_ar) }}</textarea>
        @error('notes_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <div class="d-flex justify-content-between form-text text-muted mt-1">
            <span><i class="ti ti-info-circle me-1"></i>وصف اختياري يساعد فريق العمل على فهم نوع المصروف.</span>
            <span id="notes-counter">0 / 2000</span>
        </div>
    </div>

</div>

{{-- Divider --}}
<hr class="my-4">

{{-- Buttons --}}
<div class="d-flex flex-wrap gap-2 align-items-center">
    <button type="submit" class="btn btn-danger px-4">
        <i class="ti ti-device-floppy me-1"></i>
        {{ $isEdit ? 'حفظ التعديلات' : 'إنشاء الفئة' }}
    </button>
    <a href="{{ route('admin.expense_categories.index') }}" class="btn btn-outline-secondary">
        <i class="ti ti-arrow-right me-1"></i>إلغاء والعودة
    </a>
</div>

@push('scripts')
<script>
(function () {
    // Status toggle label
    var toggle = document.getElementById('is_active');
    var label  = document.getElementById('status-label');
    if (toggle && label) {
        toggle.addEventListener('change', function () {
            if (this.checked) {
                label.textContent = 'نشط ومفعّل';
                label.className = 'text-success';
            } else {
                label.textContent = 'معطل';
                label.className = 'text-secondary';
            }
        });
    }

    // Notes counter
    var textarea = document.getElementById('notes_ar');
    var counter  = document.getElementById('notes-counter');
    if (textarea && counter) {
        function updateCount() {
            counter.textContent = textarea.value.length + ' / 2000';
            counter.style.color = textarea.value.length > 1800 ? '#dc3545' : '';
        }
        textarea.addEventListener('input', updateCount);
        updateCount();
    }
})();
</script>
@endpush