@props([
    'pageTitle' => '',
    'data' => [],
    'columns' => [],
    'actions' => [],
    'showAddButton' => false,
    'addButtonUrl' => '#',
    'showCheckboxes' => false,
    'showBatchDelete' => false,
    'showEditModal' => false,
    'showViewModal' => 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>


<!-- Edit Modal -->
@if ($showEditModal)
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit {{ $pageTitle }}</h5>
                    <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        @foreach ($columns as $column)
                            <div class="mb-3">
                                <label for="edit{{ ucfirst($column['key']) }}" class="form-label">{{ $column['name'] }}</label>
                                @if ($column['key'] === 'status')
                                    <select class="form-select" id="edit{{ ucfirst($column['key']) }}">
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>
                                    </select>
                                @else
                                    <input type="{{ $column['key'] === 'email' ? 'email' : 'text' }}"
                                           class="form-control"
                                           id="edit{{ ucfirst($column['key']) }}"
                                           {{ $column['key'] === 'username' || $column['key'] === 'memberId' ? 'readonly' : '' }}>
                                @endif
                            </div>
                        @endforeach
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateBtn">Update</button>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- View Modal -->
@if ($showViewModal)
    <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">View {{ $pageTitle }} Details</h5>
                    <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="view-details">
                        @foreach ($columns as $column)
                            <p><strong>{{ $column['name'] }}:</strong> <span id="view{{ ucfirst($column['key']) }}"></span></p>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    @if ($pageTitle === 'Locked Account')
                        <button type="button" class="btn btn-success" id="activateAccountBtn">Activate Account</button>
                    @endif
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- CSS (unchanged from your original) -->
<style>
    .card,
    .table,
    .btn,
    .form-control,
    .input-group-text,
    .modal-content {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400; 
        line-height: 1.5;
    }
    .card-header h5,
    .modal-title {
        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: hidden;
    }
    .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .modal-header {
        border-bottom: 1px solid #e9ecef;
        position: relative;
    }
    .modal-footer {
        border-top: 1px solid #e9ecef;
    }
    .form-control,
    .form-select {
        font-size: 0.9rem;
        border-radius: 5px;
    }
    .modal-close-btn {
        background: none;
        border: none;
        font-size: 1rem;
        color: #6c757d;
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
    }
    .modal-close-btn:hover {
        color: #343a40;
    }
    .view-details p {
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
    }
    .view-details strong {
        display: inline-block;
        width: 120px;
        font-weight: 500;
        color: #343a40;
    }
    .view-details span {
        color: #495057;
    }
    .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;
    }
    @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;
        }
        .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;
        }
        .modal-close-btn {
            font-size: 0.9rem;
        }
        .view-details p {
            font-size: 0.85rem;
        }
        .view-details strong {
            width: 100px;
        }
    }
    
</style>

<!-- JavaScript -->
<script>
    const tableConfig = {
        data: @json($data),
        columns: @json($columns),
        actions: @json($actions),
        showCheckboxes: {{ json_encode($showCheckboxes) }},
        showBatchDelete: {{ json_encode($showBatchDelete) }},
        showEditModal: {{ json_encode($showEditModal) }},
        showViewModal: {{ json_encode($showViewModal) }},
        pageTitle: @json($pageTitle)
    };

    const rowsPerPage = 5;
    let currentPage = 1;
    let filteredRows = [...tableConfig.data];
    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
    let sortDirection = {};
    let currentRowId = null; // Track the row being viewed

    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.id);
            let rowHtml = '';

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

            tableConfig.columns.forEach(col => {
                if (col.key === 'status') {
                    rowHtml += `
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="status-text">${row[col.key]}</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
                                    <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>`;
                } else {
                    rowHtml += `<td>${row[col.key] || ''}</td>`;
                }
            });

            if (tableConfig.actions.length > 0) {
                rowHtml += `<td class="text-center">`;
                tableConfig.actions.forEach(action => {
                    if (action === 'edit' && tableConfig.showEditModal) {
                        rowHtml += `
                            <a href="#" class="btn btn-sm edit-btn me-1" title="Edit" data-id="${row.id}">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>`;
                    } else if (action === 'view' && tableConfig.showViewModal) {
                        rowHtml += `
                            <a href="#" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View" data-id="${row.id}">
                                <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.id}">
                                <i class="fa-solid fa-trash-can"></i>
                            </button>`;
                    }
                });
                rowHtml += `</td>`;
            }

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

        attachEventListeners();
        updateDeleteButtonState();
    }

    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 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')) - 1;
                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) => {
                    const aValue = (a[key] || '').toString().toLowerCase();
                    const bValue = (b[key] || '').toString().toLowerCase();
                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
                });

                currentPage = 1;
                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() {
                    if (confirm('Are you sure you want to delete the selected items?')) {
                        const checkboxes = document.querySelectorAll('.rowCheckbox');
                        const selectedIds = Array.from(checkboxes)
                            .filter(cb => cb.checked)
                            .map(cb => cb.closest('tr').getAttribute('data-id'));

                        filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
                        tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.id.toString()));
                        originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));

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

                        renderTable();
                        renderPagination();
                        if (selectAll) selectAll.checked = false;
                    }
                });
            }
        }

        // 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');

                if (statusText) {
                    statusText.textContent = newStatus;
                }

                const rowData = filteredRows.find(r => r.id == userId);
                if (rowData) {
                    rowData.status = newStatus;
                }
            });
        });

        // Edit
        if (tableConfig.showEditModal) {
            document.querySelectorAll('.edit-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userId = this.getAttribute('data-id');
                    const user = filteredRows.find(row => row.id == userId);

                    if (user) {
                        tableConfig.columns.forEach(col => {
                            const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
                            if (input) {
                                input.value = user[col.key] || '';
                            }
                        });

                        const modal = new bootstrap.Modal(document.getElementById('editModal'));
                        modal.show();
                    }
                });
            });

            const updateBtn = document.getElementById('updateBtn');
            if (updateBtn) {
                updateBtn.addEventListener('click', function() {
                    const userId = document.querySelector('.edit-btn[data-id]')?.getAttribute('data-id');
                    const user = filteredRows.find(row => row.id == userId);
                    if (user) {
                        tableConfig.columns.forEach(col => {
                            const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
                            if (input && !input.readOnly) {
                                user[col.key] = input.value;
                            }
                        });
                    }
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                    modal.hide();
                    renderTable();
                });
            }
        }

        // View
        if (tableConfig.showViewModal) {
            document.querySelectorAll('.view-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentRowId = this.getAttribute('data-id');
                    const user = filteredRows.find(row => row.id == currentRowId);

                    if (user) {
                        tableConfig.columns.forEach(col => {
                            const span = document.getElementById(`view${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
                            if (span) {
                                span.textContent = user[col.key] || '';
                            }
                        });

                        const modal = new bootstrap.Modal(document.getElementById('viewModal'));
                        modal.show();
                    }
                });
            });

            // Activate Account for Locked Account page
            if (tableConfig.pageTitle === 'Locked Account') {
                const activateAccountBtn = document.getElementById('activateAccountBtn');
                if (activateAccountBtn) {
                    activateAccountBtn.addEventListener('click', function() {
                        if (currentRowId) {
                            const user = filteredRows.find(row => row.id == currentRowId);
                            if (user) {
                                user.status = 'Active';
                            }
                            const modal = bootstrap.Modal.getInstance(document.getElementById('viewModal'));
                            modal.hide();
                            renderTable();
                            currentRowId = null;
                        }
                    });
                }
            }
        }

        // Delete
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.getAttribute('data-id');
                if (confirm('Are you sure you want to delete this item?')) {
                    filteredRows = filteredRows.filter(row => row.id != userId);
                    tableConfig.data = tableConfig.data.filter(row => row.id != userId);
                    originalRows = originalRows.filter(row => row.id != userId);

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

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

    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 < 2;
            }
        }
    }

    renderTable();
    renderPagination();
</script>