@csrf
<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label fw-semibold">الاسم <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
               value="{{ old('name', $unit->name ?? '') }}" placeholder="مثال: كيلوجرام" required>
        <small class="text-muted">اسم واضح للوحدة ليسهل على فريق المبيعات والمخزون التعامل معها.</small>
        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-3">
        <label class="form-label fw-semibold">الاختصار <span class="text-danger">*</span></label>
        <input type="text" name="short_name" class="form-control @error('short_name') is-invalid @enderror"
               value="{{ old('short_name', $unit->short_name ?? '') }}" placeholder="مثال: كجم" required>
        <small class="text-muted">اختصار قصير يظهر في التقارير والفواتير.</small>
        @error('short_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-3">
        <label class="form-label fw-semibold">النوع <span class="text-danger">*</span></label>
        <select name="type" class="form-select @error('type') is-invalid @enderror" id="unit_type" required>
            <option value="base" {{ old('type', $unit->type ?? 'base') === 'base' ? 'selected' : '' }}>أساسية</option>
            <option value="sub"  {{ old('type', $unit->type ?? '') === 'sub' ? 'selected' : '' }}>فرعية</option>
        </select>
        @error('type') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-12"><hr class="my-1 sub-fields"></div>

    <div class="col-md-4 sub-fields">
        <label class="form-label fw-semibold">الوحدة الأساسية <span class="text-danger">*</span></label>
        <select name="base_unit_id" class="form-select @error('base_unit_id') is-invalid @enderror">
            <option value="">-- اختر الوحدة الأساسية --</option>
            @foreach($baseUnits as $baseUnit)
                <option value="{{ $baseUnit->id }}"
                    {{ (string) old('base_unit_id', $unit->base_unit_id ?? '') === (string) $baseUnit->id ? 'selected' : '' }}>
                    {{ $baseUnit->name }}
                </option>
            @endforeach
        </select>
        @error('base_unit_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-4 sub-fields">
        <label class="form-label fw-semibold">العملية <span class="text-danger">*</span></label>
        <select name="operator" id="unit_operator" class="form-select @error('operator') is-invalid @enderror">
            <option value="">-- اختر العملية --</option>
            <option value="*" {{ old('operator', $unit->operator ?? '') === '*' ? 'selected' : '' }}>× ضرب</option>
            <option value="/" {{ old('operator', $unit->operator ?? '') === '/' ? 'selected' : '' }}>÷ قسمة</option>
        </select>
        @error('operator') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-4 sub-fields">
        <label class="form-label fw-semibold">قيمة التحويل <span class="text-danger">*</span></label>
        <input type="number" step="0.000001" min="0.000001" name="operation_value"
               class="form-control @error('operation_value') is-invalid @enderror"
               value="{{ old('operation_value', $unit->operation_value ?? '') }}" placeholder="مثال: 1000">
        <small class="text-muted" id="conversion_hint">حدّد عدد الوحدات الفرعية المكافئة للوحدة الأساسية أو العكس حسب العملية المختارة.</small>
        @error('operation_value') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-12 sub-fields">
        <div class="alert alert-info py-2 mb-0">
            <i class="ti ti-info-circle me-1"></i>
            <span id="conversion_example">مثال: إذا كانت الوحدة الأساسية هي "كيلوجرام" والعملية "×" والقيمة "1000" — فهذا يعني 1 كجم = 1000 جرام.</span>
        </div>
    </div>

    <div class="col-md-6 d-flex align-items-end pb-1">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                   id="unit_is_active" {{ old('is_active', $unit->is_active ?? true) ? 'checked' : '' }}>
            <label class="form-check-label fw-semibold" for="unit_is_active">مفعّل</label>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var unitType = $('#unit_type');
    var operatorInput = $('#unit_operator');
    var hint = $('#conversion_hint');
    var example = $('#conversion_example');

    function toggleSubFields() {
        var isSub = unitType.val() === 'sub';
        $('.sub-fields').toggle(isSub);
    }

    function updateConversionTexts() {
        if (operatorInput.val() === '/') {
            hint.text('استخدم القسمة عندما تكون الوحدة الفرعية أصغر من الوحدة الأساسية وتريد حسابها كنسبة منها.');
            example.text('مثال: إذا كانت الوحدة الأساسية "علبة" والعملية "/" والقيمة "12" — فيمكن اعتبار كل قطعة = 1/12 من العلبة.');
        } else {
            hint.text('استخدم الضرب عندما تمثل الوحدة الأساسية عدداً من الوحدات الفرعية.');
            example.text('مثال: إذا كانت الوحدة الأساسية هي "كيلوجرام" والعملية "×" والقيمة "1000" — فهذا يعني 1 كجم = 1000 جرام.');
        }
    }

    unitType.on('change', toggleSubFields);
    operatorInput.on('change', updateConversionTexts);

    toggleSubFields();
    updateConversionTexts();
});
</script>
@endpush