@props(['data', 'columns', 'pagination' => true, 'perPage' => 10, 'searchable' => true, 'striped' => true, 'bordered' => true, 'hover' => true])

<div class="data-table-component" x-data="{
    columns: {{ json_encode($columns) }},
    data: {{ json_encode($data) }},
    filteredData: [],
    sortColumn: null,
    sortDirection: 'asc',
    searchTerm: '',
    currentPage: 1,
    perPage: {{ $perPage }},
    
    init() {
        this.filteredData = this.data;
        this.sortData();
    },
    
    sortData() {
        if (this.sortColumn) {
            this.filteredData.sort((a, b) => {
                const aValue = a[this.sortColumn];
                const bValue = b[this.sortColumn];
                
                if (typeof aValue === 'string' && typeof bValue === 'string') {
                    return this.sortDirection === 'asc' 
                        ? aValue.localeCompare(bValue) 
                        : bValue.localeCompare(aValue);
                } else {
                    return this.sortDirection === 'asc' 
                        ? aValue - bValue 
                        : bValue - aValue;
                }
            });
        }
    },
    
    toggleSort(column) {
        if (this.sortColumn === column) {
            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            this.sortColumn = column;
            this.sortDirection = 'asc';
        }
        this.sortData();
    },
    
    search() {
        if (!this.searchTerm) {
            this.filteredData = this.data;
        } else {
            const term = this.searchTerm.toLowerCase();
            this.filteredData = this.data.filter(item => {
                return Object.values(item).some(val => {
                    if (val === null || val === undefined) return false;
                    return val.toString().toLowerCase().includes(term);
                });
            });
        }
        this.currentPage = 1;
        this.sortData();
    },
    
    get paginatedData() {
        const startIndex = (this.currentPage - 1) * this.perPage;
        const endIndex = startIndex + this.perPage;
        return this.filteredData.slice(startIndex, endIndex);
    },
    
    get totalPages() {
        return Math.ceil(this.filteredData.length / this.perPage);
    },
    
    previousPage() {
        if (this.currentPage > 1) {
            this.currentPage--;
        }
    },
    
    nextPage() {
        if (this.currentPage < this.totalPages) {
            this.currentPage++;
        }
    }
}">
    <!-- بحث -->
    <div class="mb-4" x-show="{{ $searchable ? 'true' : 'false' }}">
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                </svg>
            </div>
            <input type="text" 
                   x-model="searchTerm" 
                   @input="search()"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
                   placeholder="بحث...">
        </div>
    </div>
    
    <!-- الجدول -->
    <div class="overflow-x-auto relative shadow-md sm:rounded-lg">
        <table class="w-full text-sm text-right text-gray-500 dark:text-gray-400" 
               :class="{
                   'table-striped': {{ $striped ? 'true' : 'false' }},
                   'table-bordered': {{ $bordered ? 'true' : 'false' }},
                   'table-hover': {{ $hover ? 'true' : 'false' }}
               }">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <template x-for="(column, index) in columns" :key="index">
                        <th scope="col" class="py-3 px-6 cursor-pointer" @click="toggleSort(column.key)">
                            <div class="flex items-center justify-between">
                                <span x-text="column.label"></span>
                                <div class="flex items-center">
                                    <template x-if="sortColumn === column.key">
                                        <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                            <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    </template>
                                </div>
                            </div>
                        </th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <template x-for="(item, index) in paginatedData" :key="index">
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700" 
                        :class="{ 'bg-gray-50 dark:bg-gray-700': index % 2 === 0 && {{ $striped ? 'true' : 'false' }} }">
                        <template x-for="(column, colIndex) in columns" :key="colIndex">
                            <td class="py-4 px-6" x-html="item[column.key]"></td>
                        </template>
                    </tr>
                </template>
                <template x-if="paginatedData.length === 0">
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <td class="py-4 px-6 text-center" :colspan="columns.length">لا توجد بيانات متاحة</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    
    <!-- ترقيم الصفحات -->
    <div class="flex items-center justify-between mt-4" x-show="{{ $pagination ? 'true' : 'false' }} && totalPages > 1">
        <div>
            <span class="text-sm text-gray-700 dark:text-gray-400">
                عرض <span class="font-semibold text-gray-900 dark:text-white" x-text="(currentPage - 1) * perPage + 1"></span> إلى 
                <span class="font-semibold text-gray-900 dark:text-white" x-text="Math.min(currentPage * perPage, filteredData.length)"></span> من 
                <span class="font-semibold text-gray-900 dark:text-white" x-text="filteredData.length"></span> عنصر
            </span>
        </div>
        <div class="flex space-x-2 rtl:space-x-reverse">
            <button @click="previousPage()" 
                    :disabled="currentPage === 1" 
                    :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
                    class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700">
                السابق
            </button>
            <button @click="nextPage()" 
                    :disabled="currentPage === totalPages" 
                    :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
                    class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700">
                التالي
            </button>
        </div>
    </div>
</div>