@props([
    'columns', // Array of column definitions
    'dataUrl', // URL for fetching data
    'baseUrl', // Base URL for edit/delete
    'exportUrl', // URL for exporting XML
    'bulkUrl' => null, // Optional URL for bulk delete
    'enableExport' => false, // Enable XML export (default: false)
    'enableBulkDelete' => false, // Enable bulk delete (default: false)
    'enableEdit' => true, // Enable edit action (default: true)
    'enableDelete' => false, // Enable delete action (default: false)
    'instanceKey', // Unique identifier for table instance
])

<div x-data="dataTable({
    instanceKey: '{{ $instanceKey ?? 'default' }}',
    dataUrl: '{{ $dataUrl }}',
    baseUrl: '{{ $baseUrl }}',
    exportUrl: '{{ $exportUrl }}',
    bulkUrl: '{{ $bulkUrl ?? url($baseUrl . '/bulk-delete') }}',
    columns: {{ Illuminate\Support\Js::from($columns) }},
    enableExport: {{ json_encode($enableExport) }},
    enableBulkDelete: {{ json_encode($enableBulkDelete) }},
    enableEdit: {{ json_encode($enableEdit) }},
    enableDelete: {{ json_encode($enableDelete) }}
})" x-init="init()" class="p-4">

	<!-- Column Visibility and Export Buttons -->
	<div class="box-header">
		<div class="sm:flex justify-between space-y-2 sm:space-y-0">
			<h5 class="box-title my-auto">{{ __('forms.Individuals') }}</h5>
			<div class="block ltr:ml-auto rtl:mr-auto my-auto">

				<button @click="showColumnManager = !showColumnManager"
					class="ti-btn ti-btn-outline ti-btn-outline-secondary py-1 px-3">
					Manage Columns
				</button>
				<a href="{{ route('crm.individuals.create') }}"
					class="ti-btn ti-btn-soft-success py-1 px-3 my-0">{{ __('forms.CreateNew') }}</a>
			</div>
		</div>
	</div>

	<div class="flex items-center justify-between mb-4 relative">
		<div class="flex space-x-2">

			<template x-if="enableExport && exportUrl">
				<a
					:href="exportUrl + '?' + new URLSearchParams({ search: search, sort: sortColumn, direction: sortDirection }).toString()"
					class="px-4 py-1.5 bg-green-600 text-white rounded" target="_blank">
					Export XML
				</a>
			</template>
		</div>

		<!-- Column Manager Dropdown -->
		<div x-show="showColumnManager" x-cloak class="absolute top-0 right-0 bg-white shadow-lg border rounded p-4 z-50">
			<div class="space-y-2">
				<template x-for="(col, index) in columns" :key="col.key">
					<div class="flex items-center space-x-2">
						<input type="checkbox" :id="`${instanceKeyWithScope()}_col_${col.key}`" :checked="col.visible"
							@change="toggleColumnVisibility(col.key)" />
						<label x-text="col.label"></label>
					</div>
				</template>
			</div>
		</div>
	</div>

	<!-- Search Input -->
	<div class="mb-4">
		<input type="text" x-model="search" @input.debounce="searchItems()" placeholder="Search..."
			class="py-2 px-3 ti-form-input">
	</div>

	<!-- Main Table -->
	<div class="box-body p-0 activity-table">
		<table class="ti-custom-table ti-custom-table-head">
			<thead>
				<tr>
					<th class="p-2" x-show="enableBulkDelete" x-cloak>
						<input type="checkbox" @change="selected = $event.target.checked ? items.map(i => i.id) : []">
					</th>
					<template x-for="col in columns.filter(c => c.visible)" :key="col.key">
						<th class="p-2 cursor-pointer" @click="sortBy(col.key)">
							<span x-text="col.label"></span>
							<span x-show="sortColumn === col.key" x-text="sortDirection === 'asc' ? '▲' : '▼'"></span>
						</th>
					</template>
					<th class="!text-end">Actions</th>
				</tr>
			</thead>
			<tbody>
				<template x-for="item in items" :key="item.id">
					<tr class="border-b hover:bg-gray-50">
						<td class="p-2" x-show="enableBulkDelete" x-cloak>
							<input type="checkbox" :value="item.id" x-model="selected">
						</td>
						<template x-for="col in columns.filter(c => c.visible)" :key="col.key + '_' + item.id">
							<td class="p-2" x-text="item[col.key]"></td>
						</template>
						<td class="p-2 space-x-2">
							<template x-if="enableEdit">
								<a :href="baseUrl + '/' + item.id + '/edit'" class="text-blue-600 hover:underline">Edit</a>
							</template>
							<template x-if="enableDelete">
								<button @click.prevent="deleteItem(item.id)" class="text-red-600 hover:underline">
									Delete
								</button>
							</template>
						</td>
					</tr>
				</template>
			</tbody>
		</table>
	</div>

	<!-- Pagination & Bulk Delete -->
	<div class="flex items-center justify-between mt-4 text-sm text-gray-600">
		<div>
			Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
		</div>
		<div class="space-x-1">
			<button class="px-2 py-1 border rounded" :disabled="currentPage <= 1" @click="prevPage()">Prev</button>
			<template x-for="pageNum in pagesList()" :key="pageNum">
				<button class="px-2 py-1 border rounded" :class="{ 'bg-gray-300': pageNum === currentPage }"
					@click="goToPage(pageNum)" x-text="pageNum"></button>
			</template>
			<button class="px-2 py-1 border rounded" :disabled="currentPage >= totalPages" @click="nextPage()">Next</button>
		</div>

		<template x-if="enableBulkDelete">
			<button class="px-4 py-1 bg-red-600 text-white rounded disabled:opacity-50" :disabled="selected.length === 0"
				@click="deleteSelected()">
				Delete Selected
			</button>
		</template>
	</div>
</div>