@php $setting = $setting ?? null; @endphp

<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">المفتاح <span class="text-danger">*</span></label>
        <input type="text" name="key" class="form-control @error('key') is-invalid @enderror"
               value="{{ old('key', $setting->key ?? '') }}" required>
        @error('key')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4 mb-3">
        <label class="form-label">النوع <span class="text-danger">*</span></label>
        <select name="type" class="form-select @error('type') is-invalid @enderror" required>
            <option value="text" {{ old('type', $setting->type ?? '') == 'text' ? 'selected' : '' }}>نص</option>
            <option value="image" {{ old('type', $setting->type ?? '') == 'image' ? 'selected' : '' }}>صورة</option>
        </select>
        @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4 mb-3" id="value-field">
        <label class="form-label">القيمة</label>
        <input type="text" name="value" class="form-control @error('value') is-invalid @enderror"
               value="{{ old('value', $setting->value ?? '') }}">
        @error('value')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4 mb-3" id="image-field" style="display: {{ old('type', $setting->type ?? '') == 'image' ? 'block' : 'none' }};">
        <label class="form-label">رفع صورة</label>
        <input type="file" name="image" class="form-control @error('image') is-invalid @enderror">
        @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
        @if($setting && $setting->getFirstMediaUrl('setting_image'))
            <div class="mt-2">
                <img src="{{ $setting->getFirstMediaUrl('setting_image') }}" width="80">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox" name="remove_image" value="1">
                    <label class="form-check-label">حذف الصورة</label>
                </div>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    document.querySelector('select[name="type"]').addEventListener('change', function() {
        const valueField = document.getElementById('value-field');
        const imageField = document.getElementById('image-field');
        if (this.value === 'image') {
            valueField.style.display = 'none';
            imageField.style.display = 'block';
        } else {
            valueField.style.display = 'block';
            imageField.style.display = 'none';
        }
    });
</script>
@endpush