@props([
    'pageTitle' => '',
    'data' => [],
    'columns' => [],
    'actions' => [],
    'showAddButton' => false,
    'addButtonUrl' => '#',
    'showCheckboxes' => false,
    'showBatchDelete' => false,
    'showEditModal' => false,
    'showViewModal' => false,
    'currentPage' => 1,
    'lastPage' => 1,
    'total' => 0,
])

<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" value="{{ request()->input('_search', '') }}">
            </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 + ($showCheckboxes ? 1 : 0) }}" data-key="{{ $column['key'] }}">
                            {{ $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">
                @foreach ($data as $row)
                    <tr class="clickable-row" data-id="{{ $row['id'] }}">
                        @if ($showCheckboxes)
                            <td class="text-center">
                                <input type="checkbox" class="rowCheckbox" value="{{ $row['id'] }}">
                            </td>
                        @endif
                        @foreach ($columns as $column)
                            <td>{{ $row[$column['key']] ?? '' }}</td>
                        @endforeach
                        @if (!empty($actions))
                            <td class="text-center">
                                @if (in_array('view', $actions))
                                    <a href="{{ route('terms-and-privacy.show', $row['id']) }}" class="btn btn-sm view-btn me-1" title="View">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                @endif
                                @if (in_array('edit', $actions))
                                    <a href="{{ route('terms-and-privacy.edit', $row['id']) }}" class="btn btn-sm edit-btn me-1" title="Edit">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                @endif
                                @if (in_array('delete', $actions))
                                    <form id="delete-form-{{ $row['id'] }}" action="{{ route('terms-and-privacy.destroy', $row['id']) }}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <a href="#" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this item?')) { document.getElementById('delete-form-{{ $row['id'] }}').submit(); }">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </form>
                                @endif
                            </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Batch Delete and Pagination -->
    <div class="d-flex justify-content-between align-items-center mt-4">
        @if ($showBatchDelete)
            <div>
                <form id="batch-delete-form" action="{{ route('terms-and-privacy.batchDelete') }}" method="POST">
                    @csrf
                    <input type="hidden" name="tp_uuid" id="batchDeleteUuids">
                    <button type="submit" class="btn btn-danger btn-sm" id="deleteSelected" disabled>
                        <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
                    </button>
                </form>
            </div>
        @endif
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm" id="pagination">
                <li class="page-item {{ $currentPage == 1 ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $currentPage - 1, '_search' => request()->input('_search')]) }}" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                @for ($i = 1; $i <= $lastPage; $i++)
                    <li class="page-item {{ $currentPage == $i ? 'active' : '' }}">
                        <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $i, '_search' => request()->input('_search')]) }}">{{ $i }}</a>
                    </li>
                @endfor
                <li class="page-item {{ $currentPage == $lastPage ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $currentPage + 1, '_search' => request()->input('_search')]) }}" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </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;
    }
    .table-container {
        overflow-x: auto;
    }
    .table th, .table td {
        white-space: nowrap;
    }
    .sortable {
        cursor: pointer;
        position: relative;
    }
    .sortable:hover {
        background-color: #f8f9fa;
    }
    .sortable i {
        margin-left: 5px;
        color: #6c757d;
    }
    .clickable-row:hover {
        background-color: #f1f1f1;
        cursor: pointer;
    }
    .view-btn { border-color: #0d6efd; color: #0d6efd; }
    .view-btn:hover { background-color: #0d6efd; color: #fff; }
    .edit-btn { border-color: #ffc107; color: #ffc107; }
    .edit-btn:hover { background-color: #ffc107; color: #fff; }
    .delete-btn { border-color: #dc3545; color: #dc3545; }
    .delete-btn:hover { background-color: #dc3545; color: #fff; }
</style>

<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),
        currentPage: {{ $currentPage }},
        lastPage: {{ $lastPage }},
        total: {{ $total }},
    };

    const rowsPerPage = 5;
    let currentPage = tableConfig.currentPage;
    let filteredRows = [...tableConfig.data];
    let sortDirection = {};

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

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

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

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

            tableConfig.columns.forEach(col => {
                let value = row[col.key] || '';
                rowHtml += `<td>${value}</td>`;
            });

            if (tableConfig.actions.length > 0) {
                rowHtml += `<td class="text-center">`;
                tableConfig.actions.forEach(action => {
                    if (action === 'view') {
                        rowHtml += `<a href="{{ route('terms-and-privacy.show', '') }}/${row.id}" class="btn btn-sm view-btn me-1" title="View"><i class="fa-solid fa-eye"></i></a>`;
                    } else if (action === 'edit') {
                        rowHtml += `<a href="{{ route('terms-and-privacy.edit', '') }}/${row.id}" class="btn btn-sm edit-btn me-1" title="Edit"><i class="fa-solid fa-pen"></i></a>`;
                    } else if (action === 'delete') {
                        rowHtml += `<form id="delete-form-${row.id}" action="{{ route('terms-and-privacy.destroy', '') }}/${row.id}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <a href="#" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this item?')) { document.getElementById('delete-form-${row.id}').submit(); }">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </form>`;
                    }
                });
                rowHtml += `</td>`;
            }

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

        attachEventListeners();
        updateNoDataMessage();
    }

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

    function attachEventListeners() {
        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();
                const url = new URL(window.location);
                if (searchTerm) {
                    url.searchParams.set('_search', searchTerm);
                    window.location.href = url;
                } else {
                    url.searchParams.delete('_search');
                    window.history.pushState({}, '', url);
                }
            });
        }

        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();
                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
                });

                currentPage = 1;
                renderTable();
            });
        });

        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();
                const url = new URL(window.location);
                url.searchParams.delete('_search');
                window.history.pushState({}, '', url);
            });
        }

        const checkboxes = document.querySelectorAll('.rowCheckbox');
        const selectAll = document.getElementById('selectAll');
        const deleteSelected = document.getElementById('deleteSelected');
        const batchDeleteUuids = document.getElementById('batchDeleteUuids');

        if (selectAll) {
            selectAll.addEventListener('change', function() {
                checkboxes.forEach(checkbox => checkbox.checked = this.checked);
                updateDeleteButton();
            });
        }

        if (checkboxes.length > 0) {
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateDeleteButton);
            });
        }

        if (deleteSelected && batchDeleteUuids) {
            deleteSelected.addEventListener('click', function(e) {
                e.preventDefault();
                const selectedUuids = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(cb => cb.value);
                if (selectedUuids.length > 0 && confirm('Are you sure you want to delete the selected items?')) {
                    batchDeleteUuids.value = JSON.stringify(selectedUuids);
                    document.getElementById('batch-delete-form').submit();
                }
            });
        }

        document.querySelectorAll('.clickable-row').forEach(row => {
            row.addEventListener('click', function(e) {
                if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
                    return;
                }
                const id = this.getAttribute('data-id');
                window.location.href = `{{ route('terms-and-privacy.show', '') }}/${id}`;
            });
        });
    }

    function updateDeleteButton() {
        const deleteSelected = document.getElementById('deleteSelected');
        const checkedBoxes = document.querySelectorAll('.rowCheckbox:checked');
        deleteSelected.disabled = checkedBoxes.length === 0;
    }

    renderTable();
</script>