@props([
    'pageTitle' => '',
    'data' => [],
    'columns' => [],
    'actions' => [],
    'showAddButton' => false,
    'addButtonUrl' => '#',
    'showCheckboxes' => false,
    'showBatchDelete' => false
])

<div class="card-header border-0 bg-transparent">
    <div class="d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
        @if ($showAddButton)
            <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
                <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
            </a>
        @endif
    </div>
</div>
<div class="card-body">
    <!-- Search and Filters -->
    <div class="row mb-3 align-items-center">
        <div class="col-12 col-md-6 mb-2 mb-md-0">
            <div class="input-group input-group-sm">
                <span class="input-group-text bg-light border-end-0">
                    <i class="fa-solid fa-magnifying-glass text-muted"></i>
                </span>
                <input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput">
            </div>
        </div>
        <div class="col-12 col-md-6 d-flex justify-content-end">
            <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
                <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="table-container">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    @if ($showCheckboxes)
                        <th class="text-center" style="width: 40px;">
                            <input type="checkbox" id="selectAll">
                        </th>
                    @endif
                    @foreach ($columns as $index => $column)
                        <th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
                            {{ $column['name'] }}
                            @if ($column['sortable'])
                                <i class="fa-solid fa-sort"></i>
                            @endif
                        </th>
                    @endforeach
                    @if (!empty($actions))
                        <th class="text-center" style="width: 120px;">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>

    <!-- Batch Delete and Pagination -->
    <div class="d-flex justify-content-between align-items-center mt-4">
        @if ($showBatchDelete)
            <div>
                <button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
                    <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
                </button>
            </div>
        @endif
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm" id="pagination"></ul>
        </nav>
    </div>
</div>

<style>
    .card,
    .table,
    .btn,
    .form-control,
    .input-group-text {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400;
        line-height: 1.5;
    }
    .card-header h5 {
        font-weight: 500;
    }
    .table thead th {
        font-weight: 500;
        font-size: 0.8rem;
    }
    .form-label {
        font-weight: 500;
        font-size: 0.9rem;
    }
    .card {
        border-radius: 10px;
    }
    .card-header {
        background-color: transparent;
    }
    .btn-primary {
        background-color: #E74610;
        border-color: #E74610;
    }
    .btn-primary:hover {
        background-color: #E74610;
        border-color: #E74610;
    }
    .sortable {
        cursor: pointer;
    }
    .sortable:hover {
        background-color: #f1f3f5;
    }
    .table {
        font-size: 0.85rem;
        width: 100%;
        table-layout: auto;
    }
    .table th,
    .table td {
        padding: 0.5rem;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table th:first-child,
    .table td:first-child {
        width: 40px;
        text-align: center;
    }
    .table th:last-child,
    .table td:last-child {
        width: 120px;
        text-align: center;
    }
    .table td:nth-child(5),
    .table th:nth-child(5) {
        width: 100px;
    }
    .table td:nth-child(6),
    .table th:nth-child(6) {
        max-width: 200px;
    }
    .table td:nth-child(7),
    .table th:nth-child(7) {
        width: 120px;
    }
    .status-btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
    .dropdown-menu-sm {
        min-width: 120px;
    }
    .dropdown-item {
        font-size: 0.85rem;
    }
    .table thead .sortable i {
        font-size: 0.7rem;
        vertical-align: middle;
    }
    .table-container {
        overflow-x: auto;
    }
    .pagination-sm .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
        border-color: #E74610;
        color: #E74610;
    }
    .pagination-sm .page-item.active .page-link {
        background-color: #E74610;
        border-color: #E74610;
        color: #fff;
    }
    .pagination-sm .page-link:hover {
        background-color: #E74610;
        border-color: #E74610;
        color: #fff;
    }
    .pagination-sm .page-item.disabled .page-link {
        border-color: #dee2e6;
        color: #6c757d;
    }
    .edit-btn {
        border-color: #E74610;
        color: #E74610;
    }
    .edit-btn:hover {
        background-color: #E74610;
        border-color: #E74610;
        color: #fff;
    }
    .table-hover tbody tr:hover {
        cursor: pointer;
        background-color: #f8f9fa;
    }
    @media (max-width: 576px) {
        .table {
            font-size: 0.75rem;
        }
        .table thead th {
            font-size: 0.75rem;
        }
        .table th,
        .table td {
            padding: 0.3rem;
        }
        .btn-sm {
            padding: 0.2rem 0.4rem;
            font-size: 0.75rem;
        }
        .input-group-sm>.form-control {
            font-size: 0.75rem;
        }
        .status-btn {
            font-size: 0.65rem;
        }
        .dropdown-item {
            font-size: 0.75rem;
        }
        .table thead .sortable i {
            font-size: 0.65rem;
        }
        . personally identifiable information like names, addresses, or other sensitive data.
        .pagination-sm .page-link {
            padding: 0.2rem 0.4rem;
            font-size: 0.75rem;
        }
        .table td:nth-child(6) {
            max-width: 150px;
        }
        .form-control,
        .form-select {
            font-size: 0.85rem;
        }
    }
</style>

<script>
    const tableConfig = {
        data: @json($data),
        columns: @json($columns),
        actions: @json($actions),
        showCheckboxes: {{ json_encode($showCheckboxes) }},
        showBatchDelete: {{ json_encode($showBatchDelete) }},
        pageTitle: @json($pageTitle),
        csrfToken: '{{ csrf_token() }}'
    };

    const rowsPerPage = 5;
    let currentPage = 1;
    let filteredRows = [...tableConfig.data];
    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
    let sortDirection = {};

    function renderTable() {
        const tableBody = document.getElementById('tableBody');
        if (!tableBody) return;
        tableBody.innerHTML = '';

        const start = (currentPage - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        const paginatedRows = filteredRows.slice(start, end);

        paginatedRows.forEach(row => {
            const tr = document.createElement('tr');
            tr.setAttribute('data-id', row.admin_uuid);
            tr.classList.add('clickable-row');
            let rowHtml = '';

            if (tableConfig.showCheckboxes) {
                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
            }

            tableConfig.columns.forEach(col => {
                let value = row[col.key] || '';
                if (col.key === 'role') {
                    value = row[col.key] === '1' ? 'Admin' : 'User';
                } else if (col.key === 'status') {
                    const displayStatus = value === 'Active' ? 'Active' : 'Inactive';
                    rowHtml += `
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.admin_uuid}" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="status-text">${displayStatus}</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.admin_uuid}">
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="active">
                                            <i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
                                            <span>Active</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="inactive">
                                            <i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
                                            <span>Inactive</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>`;
                    return;
                }
                rowHtml += `<td>${value}</td>`;
            });

            if (tableConfig.actions.length > 0) {
                rowHtml += `<td class="text-center">`;
                tableConfig.actions.forEach(action => {
                    if (action === 'edit') {
                        rowHtml += `
                            <a href="${'{{ route('user-management.edit', '') }}'}/${row.admin_uuid}" class="btn btn-sm edit-btn me-1" title="Edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>`;
                    } else if (action === 'view') {
                        rowHtml += `
                            <a href="${'{{ route('user-management.show', '') }}'}/${row.admin_uuid}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
                                <i class="fa-solid fa-eye"></i>
                            </a>`;
                    } else if (action === 'delete') {
                        rowHtml += `
                            <button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.admin_uuid}">
                                <i class="fa-solid fa-trash-can"></i>
                            </button>`;
                    }
                });
                rowHtml += `</td>`;
            }

            tr.innerHTML = rowHtml;
            tableBody.appendChild(tr);
        });

        attachEventListeners();
        updateDeleteButtonState();
        updateNoDataMessage();
    }

    function renderPagination() {
        const pagination = document.getElementById('pagination');
        if (!pagination) return;
        pagination.innerHTML = '';

        const pageCount = Math.ceil(filteredRows.length / rowsPerPage);

        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
        prevLi.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                renderTable();
                renderPagination();
            }
        });
        pagination.appendChild(prevLi);

        for (let i = 1; i <= pageCount; i++) {
            const li = document.createElement('li');
            li.className = `page-item ${currentPage === i ? 'active' : ''}`;
            li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
            li.addEventListener('click', (e) => {
                e.preventDefault();
                currentPage = i;
                renderTable();
                renderPagination();
            });
            pagination.appendChild(li);
        }

        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === pageCount ? 'disabled' : ''}`;
        nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
        nextLi.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage < pageCount) {
                currentPage++;
                renderTable();
                renderPagination();
            }
        });
        pagination.appendChild(nextLi);
    }

    function updateNoDataMessage() {
        const noDataMessage = document.getElementById('no-data-message');
        if (noDataMessage) {
            noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
        }
    }

    function attachEventListeners() {
        // Search
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                filteredRows = tableConfig.data.filter(row => {
                    return Object.values(row).some(value =>
                        value && value.toString().toLowerCase().includes(searchTerm)
                    );
                });
                currentPage = 1;
                renderTable();
                renderPagination();
            });
        }

        // Sort
        document.querySelectorAll('.sortable').forEach(header => {
            header.addEventListener('click', function() {
                const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
                const key = tableConfig.columns[columnIndex].key;

                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';

                document.querySelectorAll('.sortable i').forEach(icon => {
                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
                    icon.classList.add('fa-sort');
                });
                const icon = this.querySelector('i');
                if (icon) {
                    icon.classList.remove('fa-sort');
                    icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
                }

                filteredRows.sort((a, b) => {
                    let aValue = (a[key] || '').toString().toLowerCase();
                    let bValue = (b[key] || '').toString().toLowerCase();
                    if (key === 'role') {
                        aValue = a[key] === '1' ? 'Admin' : 'User';
                        bValue = b[key] === '1' ? 'Admin' : 'User';
                    }
                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
                });

                renderTable();
                renderPagination();
            });
        });

        // Clear Filters
        const clearFilters = document.getElementById('clearFilters');
        if (clearFilters) {
            clearFilters.addEventListener('click', function() {
                if (searchInput) searchInput.value = '';
                document.querySelectorAll('.sortable i').forEach(icon => {
                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
                    icon.classList.add('fa-sort');
                });
                sortDirection = {};
                filteredRows = [...tableConfig.data];
                currentPage = 1;
                renderTable();
                renderPagination();
            });
        }

        // Checkboxes
        if (tableConfig.showCheckboxes) {
            const selectAll = document.getElementById('selectAll');
            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    const checkboxes = document.querySelectorAll('.rowCheckbox');
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                    updateDeleteButtonState();
                });
            }

            document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
                checkbox.addEventListener('change', updateDeleteButtonState);
            });
        }

        // Batch Delete
        if (tableConfig.showBatchDelete) {
            const deleteSelected = document.getElementById('deleteSelected');
            if (deleteSelected) {
                deleteSelected.addEventListener('click', function() {
                    const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
                    const selectedIds = Array.from(checkboxes)
                        .map(cb => cb.closest('tr').getAttribute('data-id'));

                    if (selectedIds.length === 0) {
                        alert('Please select at least one user to delete.');
                        return;
                    }

                    if (confirm('Are you sure you want to delete the selected users?')) {
                        axios.delete('{{ route('user-management.batchDelete') }}', {
                            headers: {
                                'X-CSRF-TOKEN': tableConfig.csrfToken
                            },
                            data: {
                                admin_uuid: selectedIds
                            }
                        }).then(response => {
                            filteredRows = filteredRows.filter(row => !selectedIds.includes(row.admin_uuid));
                            tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.admin_uuid));
                            originalRows = originalRows.filter(row => !selectedIds.includes(row.admin_uuid));

                            const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
                            if (currentPage > maxPage && maxPage > 0) {
                                currentPage = maxPage;
                            }

                            renderTable();
                            renderPagination();
                            if (selectAll) selectAll.checked = false;
                            window.location.reload();
                        }).catch(error => {
                            console.error('Batch delete error:', error);
                            alert(error.response?.data?.message || 'Failed to delete users. You may have included your own account.');
                        });
                    }
                });
            }
        }

        // Status
        document.querySelectorAll('.status-option').forEach(option => {
            option.addEventListener('click', function(e) {
                e.preventDefault();
                const newStatus = this.getAttribute('data-status');
                const row = this.closest('tr');
                const userId = row.getAttribute('data-id');
                const statusText = row.querySelector('.status-text');
                const originalStatus = statusText.textContent;

                if (statusText) {
                    statusText.textContent = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
                }

                const rowData = filteredRows.find(r => r.admin_uuid === userId);
                if (rowData) {
                    rowData.status = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
                    axios.post(`{{ route('user-management.changeStatus', '') }}/${userId}`, {
                        status: newStatus,
                        _token: tableConfig.csrfToken
                    }).then(response => {
                        window.location.reload();
                    }).catch(error => {
                        console.error('Status update error:', error);
                        alert(error.response?.data?.message || 'Failed to update status. You cannot update your own account.');
                        statusText.textContent = originalStatus;
                        rowData.status = originalStatus;
                    });
                }
            });
        });

        // Delete
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                const userId = this.getAttribute('data-id');
                if (confirm('Are you sure you want to delete this user?')) {
                    axios.delete(`{{ route('user-management.destroy', '') }}/${userId}`, {
                        headers: {
                            'X-CSRF-TOKEN': tableConfig.csrfToken
                        }
                    }).then(response => {
                        filteredRows = filteredRows.filter(row => row.admin_uuid !== userId);
                        tableConfig.data = tableConfig.data.filter(row => row.admin_uuid !== userId);
                        originalRows = originalRows.filter(row => row.admin_uuid !== userId);

                        const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
                        if (currentPage > maxPage && maxPage > 0) {
                            currentPage = maxPage;
                        }

                        renderTable();
                        renderPagination();
                        window.location.reload();
                    }).catch(error => {
                        console.error('Delete error:', error);
                        alert(error.response?.data?.message || 'Failed to delete user. You cannot delete your own account.');
                    });
                }
            });
        });

       //Edit
        document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const userId = this.getAttribute('data-id');
                const href = this.getAttribute('href').replace(':id', userId);
                window.location.href = href;
            });
        });

        // View
        document.querySelectorAll('.view-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const href = this.getAttribute('href');
                console.log('View redirect:', href); // Debug
                window.location.href = href;
            });
        });

        // Row click to view
        document.querySelectorAll('.clickable-row').forEach(row => {
            row.addEventListener('click', function(e) {
                if (e.target.closest('.rowCheckbox, .status-btn, .edit-btn, .view-btn, .delete-btn, .dropdown-menu')) {
                    return;
                }
                const userId = this.getAttribute('data-id');
                const url = `{{ route('user-management.show', '') }}/${userId}`;
                console.log('Row redirect:', url); // Debug
                window.location.href = url;
            });
        });
    }

    function updateDeleteButtonState() {
        if (tableConfig.showBatchDelete) {
            const checkboxes = document.querySelectorAll('.rowCheckbox');
            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
            const deleteButton = document.getElementById('deleteSelected');
            if (deleteButton) {
                deleteButton.disabled = checkedCount < 1;
            }
        }
    }

    renderTable();
    renderPagination();
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>