<div class="online_resources" id="online_resources">
    <div class="header-section-online">
        <div class="header-title-online">{{ $library->resources_title }}</div>
        <div class="header-subtitle-online">{{ $library->resources_description }}</div>
    </div>

    <div class="search-filter-section">
        <div class="search-bar">
            <i class="fas fa-search search-icon"></i>
            <input type="text" id="searchInput" placeholder="Search resources..." onkeyup="searchResources()">
            <div class="search-loading" id="searchLoading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i>
            </div>
        </div>
        <div class="filters-dropdown">
            <button class="filters-button" onclick="toggleFilters()">
                <i class="fas fa-filter"></i> Filters
            </button>
            <div class="filters-menu" id="filtersMenu">
                <div class="filter-option" onclick="filterResources('latest')">
                    <i class="fas fa-clock"></i> Latest
                </div>
                <div class="filter-option" onclick="filterResources('oldest')">
                    <i class="fas fa-history"></i> Oldest
                </div>
                <div class="filter-option" onclick="filterResources('most_downloaded')">
                    <i class="fas fa-download"></i> Most Downloaded
                </div>
                <div class="filter-option" onclick="filterResources('least_downloaded')">
                    <i class="fas fa-upload"></i> Least Downloaded
                </div>
            </div>
        </div>
    </div>

    <div class="resources-table">
        <div class="table-loading" id="tableLoading" style="display: none;">
            <i class="fas fa-spinner fa-spin"></i> Loading resources...
        </div>
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Downloads</th>
                    <th>Upload Date</th>
                    <th>Category</th>
                    <th></th> <!-- For the three-dot menu -->
                </tr>
            </thead>
            <tbody id="resourcesTableBody">
                @foreach ($onlineResources as $onlineResource)
                    <tr>
                        <td>{{ $onlineResource->file_name }}</td>
                        <td>
                            @if($onlineResource->file)
                                <span class="download-count"
                                    id="download-count-{{ $onlineResource->id }}">{{ $onlineResource->file_download_count }}</span>
                                times
                                <label class="label-download"
                                    onclick="downloadFile({{ $onlineResource->id }}, '{{ $onlineResource->file_name }}')">
                                    <input type="checkbox" class="input" />
                                    <div class="circle-animated">
                                        <i class="fas fa-download icon"></i>
                                        <div class="square"></div>
                                    </div>
                                    <span class="title-initial">Download</span>
                                    <span class="title-installed">Downloaded</span>
                                </label>
                            @elseif($onlineResource->file_link)
                                <a href="{{ $onlineResource->file_link }}" target="_blank" rel="noopener" class="online-resource-link">View Resource</a>
                            @endif
                        </td>
                        <td>{{ $onlineResource->file_released_date }}</td>
                        <td>{{ $onlineResource->file_category }}</td>
                        <td><i class="fas fa-ellipsis-v more-options"></i></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="pagination-section">
        <div class="pagination-info" id="paginationInfo">1 - {{ $onlineResources->count() }} of
            {{ $onlineResources->count() }} items</div>
        <div class="pagination-buttons">
            <button class="pagination-btn">Previous</button>
            <button class="pagination-btn">Next</button>
        </div>
    </div>

</div>

<script>
    let searchTimeout;
    let currentFilter = '';

    // Search functionality
    function searchResources() {
        clearTimeout(searchTimeout);

        // Show search loading indicator
        const searchLoading = document.getElementById('searchLoading');
        if (searchLoading) searchLoading.style.display = 'block';

        searchTimeout = setTimeout(function() {
            const searchTerm = document.getElementById('searchInput').value;
            fetchResources(searchTerm, currentFilter);
        }, 300); // 300ms delay to avoid too many requests
    }

    // Filter functionality
    function filterResources(filter) {
        currentFilter = filter;
        const searchTerm = document.getElementById('searchInput').value;

        // Show loading indicator
        showTableLoading();

        fetchResources(searchTerm, filter);
        toggleFilters(); // Close the filter menu
    }

    // Show table loading
    function showTableLoading() {
        const tableLoading = document.getElementById('tableLoading');
        const table = document.querySelector('.resources-table table');

        if (tableLoading) tableLoading.style.display = 'block';
        if (table) table.style.opacity = '0.5';
    }

    // Hide table loading
    function hideTableLoading() {
        const tableLoading = document.getElementById('tableLoading');
        const table = document.querySelector('.resources-table table');

        if (tableLoading) tableLoading.style.display = 'none';
        if (table) table.style.opacity = '1';
    }

    // Toggle filter menu
    function toggleFilters() {
        const menu = document.getElementById('filtersMenu');
        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
    }

    // Download file functionality
    function downloadFile(resourceId, fileName) {
        const downloadLabel = event.target.closest('.label-download');
        const downloadIcon = downloadLabel.querySelector('.icon');
        const originalIcon = downloadIcon.innerHTML;

        downloadIcon.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        downloadLabel.style.pointerEvents = 'none';

        // Download file and update count via AJAX
        fetch(`/download-online-resource/${resourceId}`)
            .then(response => {
                if (response.ok) {
                    // Create a blob and trigger download
                    return response.blob().then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = fileName;
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);

                        // Now fetch the updated count from the backend
                        fetch(`/api/online-resource-count/${resourceId}`)
                            .then(res => res.json())
                            .then(data => {
                                if (data.count !== undefined) {
                                    const countElement = document.getElementById(`download-count-${resourceId}`);
                                    if (countElement) countElement.textContent = data.count;
                                }
                            });
                    });
                } else {
                    throw new Error('Download failed');
                }
            })
            .catch(() => {
                alert('Download failed. Please try again.');
            })
            .finally(() => {
                downloadIcon.innerHTML = originalIcon;
                downloadLabel.style.pointerEvents = 'auto';
                downloadLabel.classList.add('downloaded');
                setTimeout(() => {
                    downloadLabel.classList.remove('downloaded');
                }, 2000);
            });
    }

    // Fetch resources from server
    function fetchResources(search = '', filter = '') {
        const url = new URL('{{ route("search.online.resources") }}');
        if (search) url.searchParams.append('search', search);
        if (filter) url.searchParams.append('filter', filter);

        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateTable(data.data);
                    updatePaginationInfo(data.count);
                }

                // Hide loading indicators
                hideTableLoading();
                const searchLoading = document.getElementById('searchLoading');
                if (searchLoading) searchLoading.style.display = 'none';
            })
            .catch(error => {
                console.error('Error fetching resources:', error);

                // Hide loading indicators on error
                hideTableLoading();
                const searchLoading = document.getElementById('searchLoading');
                if (searchLoading) searchLoading.style.display = 'none';

                // Show error message
                const tbody = document.getElementById('resourcesTableBody');
                if (tbody) {
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 20px; color: red;">Error loading resources. Please try again.</td></tr>';
                }
            });
    }

    // Update table with new data
    function updateTable(resources) {
        const tbody = document.getElementById('resourcesTableBody');
        tbody.innerHTML = '';

        if (resources.length === 0) {
            tbody.innerHTML =
                '<tr><td colspan="5" style="text-align: center; padding: 20px;">No resources found</td></tr>';
            return;
        }

        resources.forEach(resource => {
            const row = document.createElement('tr');
            let downloadCell = '';
            if (resource.file) {
                downloadCell = `
                    <span class="download-count" id="download-count-${resource.id}">${resource.file_download_count}</span> times
                    <label class="label-download" onclick="downloadFile(${resource.id}, '${resource.file_name}')">
                        <input type="checkbox" class="input" />
                        <div class="circle-animated">
                            <i class="fas fa-download icon"></i>
                            <div class="square"></div>
                        </div>
                        <span class="title-initial">Download</span>
                        <span class="title-installed">Downloaded</span>
                    </label>
                `;
            } else if (resource.file_link) {
                downloadCell = `<a href="${resource.file_link}" target="_blank" rel="noopener" class="online-resource-link">View Resource</a>`;
            }
            row.innerHTML = `
                <td>${resource.file_name}</td>
                <td>
                    ${downloadCell}
                </td>
                <td>${resource.file_released_date}</td>
                <td>${resource.file_category}</td>
                <td><i class="fas fa-ellipsis-v more-options"></i></td>
            `;
            tbody.appendChild(row);
        });
    }

    // Update pagination info
    function updatePaginationInfo(count) {
        const paginationInfo = document.getElementById('paginationInfo');
        paginationInfo.textContent = `1 - ${count} of ${count} items`;
    }

    // Close filter menu when clicking outside
    document.addEventListener('click', function(event) {
        const filtersDropdown = document.querySelector('.filters-dropdown');
        const filtersMenu = document.getElementById('filtersMenu');

        if (!filtersDropdown.contains(event.target)) {
            filtersMenu.style.display = 'none';
        }
    });
</script>

<style>
    /* Enhanced responsive styles */
@media (max-width: 1200px) {
    .online_resources {
        padding: 2.5rem 0;
    }
    .header-section-online {
        padding: 2rem 0;
    }
    .header-title-online {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    .header-subtitle-online {
        font-size: 1.1rem;
    }
    .search-filter-section {
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .search-bar {
        padding: 0.8rem 1rem;
    }
    .search-bar input {
        font-size: 0.95rem;
    }
    .filters-button {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    .filters-menu {
        top: 100%;
        min-width: 200px;
    }
    .filter-option {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    .resources-table {
        margin-bottom: 2rem;
    }
    .resources-table table {
        font-size: 0.9rem;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.8rem 0.6rem;
    }
    .download-count {
        font-size: 0.85rem;
    }
    .label-download {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    .online-resource-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    .pagination-section {
        gap: 1.5rem;
    }
    .pagination-info {
        font-size: 0.9rem;
    }
    .pagination-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 992px) {
    .online_resources {
        padding: 2rem 0;
    }
    .header-section-online {
        padding: 1.5rem 0;
    }
    .header-title-online {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    .header-subtitle-online {
        font-size: 1rem;
    }
    .search-filter-section {
        gap: 1.2rem;
        margin-bottom: 2rem;
    }
    .search-bar {
        padding: 0.7rem 0.9rem;
    }
    .search-bar input {
        font-size: 0.9rem;
    }
    .filters-button {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    .filters-menu {
        min-width: 180px;
    }
    .filter-option {
        padding: 0.7rem 0.9rem;
        font-size: 0.85rem;
    }
    .resources-table {
        margin-bottom: 1.8rem;
    }
    .resources-table table {
        font-size: 0.85rem;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.7rem 0.5rem;
    }
    .download-count {
        font-size: 0.8rem;
    }
    .label-download {
        padding: 0.35rem 0.7rem;
        font-size: 0.75rem;
    }
    .online-resource-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
    .pagination-section {
        gap: 1.2rem;
    }
    .pagination-info {
        font-size: 0.85rem;
    }
    .pagination-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .online_resources {
        padding: 1.5rem 0;
    }
    .header-section-online {
        padding: 1.2rem 0;
    }
    .header-title-online {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }
    .header-subtitle-online {
        font-size: 0.95rem;
    }
    .search-filter-section {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .search-bar {
        padding: 0.6rem 0.8rem;
    }
    .search-bar input {
        font-size: 0.85rem;
    }
    .filters-button {
        padding: 0.6rem 0.9rem;
        font-size: 0.8rem;
    }
    .filters-menu {
        min-width: 160px;
    }
    .filter-option {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
    .resources-table {
        margin-bottom: 1.5rem;
        overflow-x: auto;
    }
    .resources-table table {
        font-size: 0.8rem;
        min-width: 600px;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.6rem 0.4rem;
    }
    .download-count {
        font-size: 0.75rem;
    }
    .label-download {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    .online-resource-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    .pagination-section {
        flex-direction: column;
        gap: 1rem;
    }
    .pagination-info {
        font-size: 0.8rem;
    }
    .pagination-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .online_resources {
        padding: 1.2rem 0;
    }
    .header-section-online {
        padding: 1rem 0;
    }
    .header-title-online {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    .header-subtitle-online {
        font-size: 0.9rem;
    }
    .search-filter-section {
        gap: 0.8rem;
        margin-bottom: 1.2rem;
    }
    .search-bar {
        padding: 0.5rem 0.7rem;
    }
    .search-bar input {
        font-size: 0.8rem;
    }
    .filters-button {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }
    .filters-menu {
        min-width: 140px;
    }
    .filter-option {
        padding: 0.5rem 0.7rem;
        font-size: 0.75rem;
    }
    .resources-table {
        margin-bottom: 1.2rem;
    }
    .resources-table table {
        font-size: 0.75rem;
        min-width: 500px;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.5rem 0.3rem;
    }
    .download-count {
        font-size: 0.7rem;
    }
    .label-download {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    .online-resource-link {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    .pagination-section {
        gap: 0.8rem;
    }
    .pagination-info {
        font-size: 0.75rem;
    }
    .pagination-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .online_resources {
        padding: 1rem 0;
    }
    .header-section-online {
        padding: 0.8rem 0;
    }
    .header-title-online {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }
    .header-subtitle-online {
        font-size: 0.85rem;
    }
    .search-filter-section {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }
    .search-bar {
        padding: 0.4rem 0.6rem;
    }
    .search-bar input {
        font-size: 0.75rem;
    }
    .filters-button {
        padding: 0.4rem 0.7rem;
        font-size: 0.7rem;
    }
    .filters-menu {
        min-width: 120px;
    }
    .filter-option {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }
    .resources-table {
        margin-bottom: 1rem;
    }
    .resources-table table {
        font-size: 0.7rem;
        min-width: 400px;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.4rem 0.25rem;
    }
    .download-count {
        font-size: 0.65rem;
    }
    .label-download {
        padding: 0.2rem 0.4rem;
        font-size: 0.6rem;
    }
    .online-resource-link {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    .pagination-section {
        gap: 0.6rem;
    }
    .pagination-info {
        font-size: 0.7rem;
    }
    .pagination-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 400px) {
    .online_resources {
        padding: 0.8rem 0;
    }
    .header-section-online {
        padding: 0.6rem 0;
    }
    .header-title-online {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }
    .header-subtitle-online {
        font-size: 0.8rem;
    }
    .search-filter-section {
        gap: 0.5rem;
        margin-bottom: 0.8rem;
    }
    .search-bar {
        padding: 0.3rem 0.5rem;
    }
    .search-bar input {
        font-size: 0.7rem;
    }
    .filters-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.65rem;
    }
    .filters-menu {
        min-width: 100px;
    }
    .filter-option {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }
    .resources-table {
        margin-bottom: 0.8rem;
    }
    .resources-table table {
        font-size: 0.65rem;
        min-width: 350px;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.3rem 0.2rem;
    }
    .download-count {
        font-size: 0.6rem;
    }
    .label-download {
        padding: 0.15rem 0.3rem;
        font-size: 0.55rem;
    }
    .online-resource-link {
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
    }
    .pagination-section {
        gap: 0.5rem;
    }
    .pagination-info {
        font-size: 0.65rem;
    }
    .pagination-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.6rem;
    }
}

@media (max-width: 360px) {
    .online_resources {
        padding: 0.6rem 0;
    }
    .header-section-online {
        padding: 0.5rem 0;
    }
    .header-title-online {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .header-subtitle-online {
        font-size: 0.75rem;
    }
    .search-filter-section {
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }
    .search-bar {
        padding: 0.25rem 0.4rem;
    }
    .search-bar input {
        font-size: 0.65rem;
    }
    .filters-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.6rem;
    }
    .filters-menu {
        min-width: 90px;
    }
    .filter-option {
        padding: 0.25rem 0.4rem;
        font-size: 0.6rem;
    }
    .resources-table {
        margin-bottom: 0.6rem;
    }
    .resources-table table {
        font-size: 0.6rem;
        min-width: 300px;
    }
    .resources-table th,
    .resources-table td {
        padding: 0.25rem 0.15rem;
    }
    .download-count {
        font-size: 0.55rem;
    }
    .label-download {
        padding: 0.1rem 0.25rem;
        font-size: 0.5rem;
    }
    .online-resource-link {
        font-size: 0.55rem;
        padding: 0.1rem 0.25rem;
    }
    .pagination-section {
        gap: 0.4rem;
    }
    .pagination-info {
        font-size: 0.6rem;
    }
    .pagination-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.55rem;
    }
}
</style>


