@php
    $materialIcons = [
        'autorenew', 'cleaning_services', 'location_on', 'forum', 'star', 'star_rate', 'star_border', 'thumb_up',
        'sentiment_very_satisfied', 'sentiment_satisfied', 'verified', 'check_circle', 'hotel', 'home',
        'wifi', 'ac_unit', 'pool', 'tv', 'local_parking', 'kitchen', 'fitness_center', 'spa', 'pets', 'restaurant', 
        'local_bar', 'local_cafe', 'room_service', 'elevator', 'accessible', 'smoke_free', 'smoking_rooms', 'child_care', 
        'business_center', 'meeting_room', 'airport_shuttle', 'local_laundry_service', 'iron', 'dry_cleaning', 'beach_access', 
        'casino', 'golf_course', 'hot_tub', 'outdoor_grill', 'fire_extinguisher', 'security', 'first_aid', 'medical_services',
        'king_bed', 'bathtub', 'shower', 'bed', 'crib', 'deck', 'balcony', 'living', 'yard', 'water', 'electric_car', 
        'camera_outdoor', 'sports_tennis', 'sports_esports', 'mosque', 'storefront', 'directions_car'
    ];
    $currentIcon = isset($review_category) && $review_category->icon ? $review_category->icon : '';
    if($currentIcon && !in_array($currentIcon, $materialIcons)) {
        $materialIcons[] = $currentIcon;
    }
@endphp

<div class="row">
    <!-- Category Name Field -->
    <div class="form-group col-md-6">
        <label for="category_name" class="font-weight-bold">اسم الفئة</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-tag"></i></span>
            </div>
            <input type="text" name="category_name" id="category_name" class="form-control @error('category_name') is-invalid @enderror" value="{{ old('category_name', $review_category->category_name ?? '') }}" required placeholder="أدخل اسم الفئة">
            @error('category_name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <!-- Icon Field -->
    <div class="form-group col-md-6">
        <label for="icon" class="font-weight-bold">الأيقونة (اختياري)</label>
        <select name="icon" id="material-icon-picker" class="form-control" style="width: 100%;">
            <option value="">اختر أيقونة...</option>
            @foreach($materialIcons as $icon)
                <option value="{{ $icon }}" data-icon="{{ $icon }}" {{ $currentIcon == $icon ? 'selected' : '' }}>
                    {{ $icon }}
                </option>
            @endforeach
        </select>
        <small class="form-text text-muted">
            ابحث واختر الأيقونة المناسبة من قائمة Google Material Icons.
        </small>
        @error('icon')
            <div class="text-danger small mt-1">{{ $message }}</div>
        @enderror
    </div>

    <!-- Sort Order Field -->
    <div class="form-group col-md-6">
        <label for="sort_order" class="font-weight-bold">ترتيب الفئة</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-sort-numeric-down"></i></span>
            </div>
            <input type="number" name="sort_order" id="sort_order" class="form-control @error('sort_order') is-invalid @enderror" value="{{ old('sort_order', $review_category->sort_order ?? 0) }}" min="0">
            @error('sort_order')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <small class="form-text text-muted">تحديد ترتيب ظهور الفئة للعملاء (رقم أصغر = يظهر أولاً).</small>
    </div>

    <!-- Is Active Field -->
    <div class="form-group col-md-6 d-flex align-items-center">
        <div class="custom-control custom-switch mt-4">
            <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" {{ old('is_active', $review_category->is_active ?? true) ? 'checked' : '' }}>
            <label class="custom-control-label font-weight-bold ml-2" for="is_active" style="cursor:pointer; margin-right: 2.5rem;">تفعيل الفئة</label>
        </div>
    </div>

    <!-- Description Field -->
    <div class="form-group col-md-12 mt-3">
        <label for="description" class="font-weight-bold">الوصف (اختياري)</label>
        <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" rows="4" placeholder="وصف الفئة">{{ old('description', $review_category->description ?? '') }}</textarea>
        @error('description')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
</div>

@push('page_scripts')
<script>
    $(document).ready(function() {
        var $picker = $('#material-icon-picker');
        
        if ($picker.hasClass("select2-hidden-accessible")) {
            $picker.select2('destroy');
        }
        
        $picker.select2({
            templateResult: function (icon) {
                if (!icon.id) { return icon.text; }
                return $('<span style="display: flex; align-items: center; gap: 8px;"><i class="material-icons" style="font-size: 20px; color: #555;">' + icon.id + '</i><span>' + icon.id + '</span></span>');
            },
            templateSelection: function (icon) {
                if (!icon.id) { return icon.text; }
                return $('<span style="display: flex; align-items: center; gap: 8px;"><i class="material-icons" style="font-size: 20px; color: #555;">' + icon.id + '</i><span>' + icon.id + '</span></span>');
            },
            placeholder: 'ابحث عن أيقونة... (يمكنك كتابة اسم أيقونة جديدة)',
            allowClear: true,
            tags: true,
            width: '100%',
            escapeMarkup: function(m) { return m; }
        });
    });
</script>
@endpush