@php
$operators = [
    '=' => 'يساوي',
    '!=' => 'لا يساوي',
    '>' => 'أكبر من',
    '<' => 'أصغر من',
    '>=' => 'أكبر من أو يساوي',
    '<=' => 'أصغر من أو يساوي',
    'like' => 'يحتوي على',
    'in' => 'ضمن',
    'between' => 'بين',
    'null' => 'فارغ'
];
@endphp

<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <h2 class="text-xl font-bold mb-4">بحث متقدم</h2>
    
    <form method="GET" class="space-y-4">
        <div id="filters-container" class="space-y-3">
            <div class="filter-row flex gap-2 items-end">
                <div class="flex-1">
                    <label class="block text-sm font-medium mb-1">الحقل</label>
                    <input type="text" name="filters[0][field]" placeholder="اسم الحقل" class="w-full px-3 py-2 border border-gray-300 rounded" required>
                </div>
                <div class="w-32">
                    <label class="block text-sm font-medium mb-1">المعامل</label>
                    <select name="filters[0][operator]" class="w-full px-3 py-2 border border-gray-300 rounded" required>
                        @foreach($operators as $op => $label)
                            <option value="{{ $op }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex-1">
                    <label class="block text-sm font-medium mb-1">القيمة</label>
                    <input type="text" name="filters[0][value]" placeholder="القيمة" class="w-full px-3 py-2 border border-gray-300 rounded">
                </div>
                <button type="button" class="remove-filter bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded h-10">
                    حذف
                </button>
            </div>
        </div>

        <button type="button" id="add-filter" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
            + إضافة معيار
        </button>

        <div class="border-t pt-4">
            <h3 class="font-bold mb-2">الترتيب</h3>
            <div class="flex gap-2 items-end">
                <div class="flex-1">
                    <label class="block text-sm font-medium mb-1">حقل الترتيب</label>
                    <input type="text" name="sort_field" placeholder="اسم الحقل" class="w-full px-3 py-2 border border-gray-300 rounded">
                </div>
                <div class="w-32">
                    <label class="block text-sm font-medium mb-1">الاتجاه</label>
                    <select name="sort_direction" class="w-full px-3 py-2 border border-gray-300 rounded">
                        <option value="asc">تصاعدي</option>
                        <option value="desc">تنازلي</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="flex gap-2">
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                بحث
            </button>
            <button type="reset" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded">
                إعادة تعيين
            </button>
            <button type="button" id="save-filter" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
                حفظ المعايير
            </button>
        </div>
    </form>
</div>

<script>
let filterCount = 1;

document.getElementById('add-filter').addEventListener('click', function() {
    const container = document.getElementById('filters-container');
    const newFilter = document.querySelector('.filter-row').cloneNode(true);
    
    newFilter.querySelectorAll('input, select').forEach((el, index) => {
        el.name = el.name.replace(/\[\d+\]/g, '[' + filterCount + ']');
    });
    
    container.appendChild(newFilter);
    filterCount++;
    attachRemoveListeners();
});

function attachRemoveListeners() {
    document.querySelectorAll('.remove-filter').forEach(btn => {
        btn.onclick = function() {
            if (document.querySelectorAll('.filter-row').length > 1) {
                this.closest('.filter-row').remove();
            } else {
                alert('يجب الاحتفاظ بمعيار واحد على الأقل');
            }
        };
    });
}

document.getElementById('save-filter').addEventListener('click', function() {
    const name = prompt('أدخل اسم معايير البحث:');
    if (name) {
        const form = document.querySelector('form');
        const filters = {};
        const formData = new FormData(form);
        
        console.log('معايير البحث المحفوظة:', name);
        alert('تم حفظ معايير البحث بنجاح');
    }
});

attachRemoveListeners();
</script>