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

<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="{{ $search }}" data-search-param="_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>
                    @foreach ($columns as $index => $column)
                        <th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index }}">
                            {{ $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>

    <!-- Pagination -->
    <div class="d-flex justify-content-end align-items-center mt-4">
        <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">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit {{ $pageTitle }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <input type="hidden" name="id" id="editId">
                        @foreach ($columns as $column)
                            @if (!in_array($column['key'], ['date_created', 'created_by', 'modified_by', 'date_modified']))
                                <div class="mb-3">
                                    <label for="edit_{{ $column['key'] }}" class="form-label">{{ $column['name'] }}</label>
                                    <input type="text" class="form-control" id="edit_{{ $column['key'] }}" name="{{ $column['key'] }}" required>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </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">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">View {{ $pageTitle }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="viewModalBody"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif

<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),
        showEditModal: {{ json_encode($showEditModal) }},
        showViewModal: {{ json_encode($showViewModal) }},
        pageTitle: @json($pageTitle),
        csrfToken: '{{ csrf_token() }}',
        currentPage: {{ $currentPage }},
        lastPage: {{ $lastPage }},
        total: {{ $total }},
        search: @json($search),
    };

    console.log('Table Config:', {
        data: tableConfig.data,
        total: tableConfig.total,
        currentPage: tableConfig.currentPage,
        lastPage: tableConfig.lastPage,
        search: tableConfig.search
    });

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

    function renderTable() {
        const tableBody = document.getElementById('tableBody');
        if (!tableBody) {
            console.error('Table body element not found');
            return;
        }
        tableBody.innerHTML = '';

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

        console.log('Rendering table:', {
            filteredRowsCount: filteredRows.length,
            paginatedRows: paginatedRows,
            paginatedRowsCount: paginatedRows.length,
            startIndex: startIndex,
            endIndex: endIndex
        });

        if (paginatedRows.length === 0) {
            tableBody.innerHTML = '<tr><td colspan="' + (tableConfig.columns.length + (tableConfig.actions.length > 0 ? 1 : 0)) + '" class="text-center">No stations found</td></tr>';
        } else {
            paginatedRows.forEach(row => {
                if (!row.id || !row.station_code || !row.station_name) {
                    console.warn('Invalid row data:', row);
                    return;
                }
                const tr = document.createElement('tr');
                tr.setAttribute('data-id', row.id);
                tr.classList.add('clickable-row');
                let rowHtml = '';

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

                if (tableConfig.actions.length > 0) {
                    rowHtml += `<td class="text-center">`;
                    tableConfig.actions.forEach(action => {
                        const routeBase = 'stations';
                        if (action === 'view') {
                            rowHtml += `<a href="/${routeBase}/${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 += `<button class="btn btn-sm edit-btn me-1" title="Edit" onclick="openEditModal('${row.id}')"><i class="fa-solid fa-pen"></i></button>`;
                        } else if (action === 'delete') {
                            rowHtml += `<a href="/${routeBase}/${row.id}" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this station?')) { document.getElementById('delete-form-${row.id}').submit(); }"><i class="fa-solid fa-trash"></i></a>
                                        <form id="delete-form-${row.id}" action="/${routeBase}/${row.id}" method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>`;
                        }
                    });
                    rowHtml += `</td>`;
                }

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

        updateNoDataMessage();
        attachEventListeners();
    }

    function renderPagination() {
        const pagination = document.getElementById('pagination');
        if (!pagination) {
            console.error('Pagination element not found');
            return;
        }
        pagination.innerHTML = '';

        const totalPages = Math.max(tableConfig.lastPage, 1);
        console.log('Rendering pagination:', { totalPages, currentPage });

        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--;
                updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
            }
        });
        pagination.appendChild(prevLi);

        for (let i = 1; i <= totalPages; 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;
                updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
            });
            pagination.appendChild(li);
        }

        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === totalPages ? '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 < totalPages) {
                currentPage++;
                updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
            }
        });
        pagination.appendChild(nextLi);
    }

    function updateUrl(page, search = '') {
        console.log('Updating URL:', { page, search });
        const url = new URL(window.location);
        url.searchParams.set('page', page);
        if (search) {
            url.searchParams.set('_search', search);
        } else {
            url.searchParams.delete('_search');
        }
        Object.keys(sortDirection).forEach(colIndex => {
            const key = tableConfig.columns[colIndex].key;
            url.searchParams.set('sort', `${key}|${sortDirection[colIndex]}`);
        });
        window.location.href = url.toString();
    }

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

    function openEditModal(id) {
        const row = tableConfig.data.find(row => row.id === id);
        if (!row) {
            console.error('Row not found for edit:', id);
            return;
        }

        const editForm = document.getElementById('editForm');
        if (editForm) {
            editForm.action = `/stations/${id}`;
            document.getElementById('editId').value = id;
            tableConfig.columns.forEach(col => {
                const input = document.getElementById(`edit_${col.key}`);
                if (input) {
                    input.value = row[col.key] || '';
                }
            });
            const modal = new bootstrap.Modal(document.getElementById('editModal'));
            modal.show();
        }
    }

    function openViewModal(id) {
        const row = tableConfig.data.find(row => row.id === id);
        if (!row) {
            console.error('Row not found for view:', id);
            return;
        }

        const modalBody = document.getElementById('viewModalBody');
        if (modalBody) {
            let html = '';
            tableConfig.columns.forEach(col => {
                let value = row[col.key] || 'N/A';
                html += `<p><strong>${col.name}:</strong> ${value}</p>`;
            });
            modalBody.innerHTML = html;
            const modal = new bootstrap.Modal(document.getElementById('viewModal'));
            modal.show();
        }
    }

    function attachEventListeners() {
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                console.log('Search input:', this.value);
                updateUrl(1, this.value);
            });
        }

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

                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
                console.log('Sorting:', { key, direction: sortDirection[columnIndex] });

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

                updateUrl(1, document.getElementById('searchInput')?.value || '');
            });
        });

        const clearFilters = document.getElementById('clearFilters');
        if (clearFilters) {
            clearFilters.addEventListener('click', function() {
                console.log('Clearing filters');
                if (searchInput) searchInput.value = '';
                sortDirection = {};
                document.querySelectorAll('.sortable i').forEach(icon => {
                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
                    icon.classList.add('fa-sort');
                });
                updateUrl(1, '');
            });
        }

        document.querySelectorAll('.clickable-row').forEach(row => {
            row.addEventListener('click', function(e) {
                if (e.target.closest('.edit-btn, .view-btn, .delete-btn')) {
                    return;
                }
                const id = this.getAttribute('data-id');
                console.log('Row clicked:', id);
                if (tableConfig.showViewModal) {
                    openViewModal(id);
                } else {
                    window.location.href = `/stations/${id}`;
                }
            });
        });
    }

    try {
        renderTable();
        renderPagination();
    } catch (error) {
        console.error('Error rendering table:', error);
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">