@props([
    'pageTitle' => 'Notification',
    'data' => [],
    'columns' => [
        ['name' => 'ID', 'key' => 'id', 'sortable' => true],
        ['name' => 'Subject', 'key' => 'subject', 'sortable' => true],
        ['name' => 'Content', 'key' => 'description', 'sortable' => true],
        ['name' => 'Is Scheduled', 'key' => 'isScheduled', 'sortable' => true],
        ['name' => 'Schedule', 'key' => 'schedule', 'sortable' => true],
        ['name' => 'Expiration', 'key' => 'expiration', 'sortable' => true],
    ],
    'showAddButton' => true,
    'addButtonUrl' => route('notification.create'),
])

<div class="card">
    <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>
                        @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
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
            <div id="no-data-message" style="display: {{ empty($data) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
                <p>No notifications found.</p>
            </div>
        </div>
    </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;
    }
    .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 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;
    }
    @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;
        }
        .form-control,
        .form-select {
            font-size: 0.85rem;
        }
    }
</style>

<script>
    const tableConfig = {
        data: @json($data),
        columns: @json($columns),
        showAddButton: {{ json_encode($showAddButton) }},
        addButtonUrl: '{{ $addButtonUrl }}',
        csrfToken: '{{ csrf_token() }}',
    };

    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 = '';

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

            tableConfig.columns.forEach(col => {
                let value = row[col.key] || '';
                if (col.key === 'schedule' || col.key === 'expiration') {
                    value = value ? new Date(value).toLocaleString() : 'N/A';
                }
                rowHtml += `<td>${value}</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() {
        // 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)
                    );
                });
                renderTable();
            });
        }

        // 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) => {
                    let aValue = (a[key] || '').toString().toLowerCase();
                    let bValue = (b[key] || '').toString().toLowerCase();
                    if (key === 'schedule' || key === 'expiration') {
                        aValue = new Date(a[key] || '1970-01-01').getTime();
                        bValue = new Date(b[key] || '1970-01-01').getTime();
                        return sortDirection[columnIndex] === 'asc' ? aValue - bValue : bValue - aValue;
                    }
                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
                });

                renderTable();
            });
        });

        // 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];
                renderTable();
            });
        }
    }

    renderTable();
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">