<?php
// Set page title before including header
$pageTitle = "Notifications - E&SE Kotli";
include_once 'header_new.php'; 

// Directory path
$dir = 'notifications/';

// Get all files from the directory
$files = array_diff(scandir($dir), array('.', '..'));

// Array to hold file data
$file_data = array();

// Loop through each file
foreach ($files as $file) {
    // Extract date and title from filename
    if (preg_match('/(\d{2}-\d{2}-\d{4})_(.*)\.(pdf|docx|txt)/i', $file, $matches)) {
        $date = DateTime::createFromFormat('d-m-Y', $matches[1]);
        $title = ucwords(str_replace(array('_', '-'), ' ', $matches[2]));
        $file_data[] = array(
            'date' => $date,
            'title' => $title,
            'file' => $file,
            'ext' => strtolower($matches[3])
        );
    }
}

// Sort files by date in descending order
usort($file_data, function($a, $b) {
    return $b['date'] <=> $a['date'];
});
?>

<style>
    .content-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 20px auto;
    max-width: 1200px;
    width: 100%;

    }
    
    .stylish-header {
        color: #2c3e50;
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 15px;
        text-align: center;
    }
    
    .stylish-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: #f39c12;
    }
    
    .card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .card-header {
        background-color: #2c3e50;
        color: white;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .notifications-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .notifications-table th {
        background-color: #2c3e50;
        color: white;
        padding: 12px;
        text-align: left;
    }

    .notifications-table td {
        padding: 12px;
        text-align: left;
        border: 1px solid #ddd;
        transition: all 0.2s ease; /* Add smooth transition */
    }

    .notifications-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* Enhanced hover effect */
    .notifications-table tr:hover td {
        background-color: #e3f2fd; /* Light blue highlight */
        color: #000;
        transform: scale(1.01); /* Slight zoom effect */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		border-left: 3px solid #f39c12; /* Orange left border */
    	border-right: 3px solid #f39c12; /* Orange right border */
    }

    /* Keep download button styling on hover */
    .notifications-table tr:hover .file-link {
        transform: translateY(0); /* Reset the download button transform */
        box-shadow: none; /* Remove shadow to prevent visual conflict */
    }

    
    .file-link {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 4px;
        color: white;
        text-decoration: none;
        transition: all 0.3s;
        font-weight: 500;
    }
    
    .file-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        text-decoration: none;
    }
    
    .pdf-link {
        background-color: #e74c3c;
    }
    
    .docx-link {
        background-color: #3498db;
    }
    
    .txt-link {
        background-color: #2ecc71;
    }
    
    .file-icon {
        margin-right: 5px;
    }
    
    /* News Ticker Styles */
    .news-ticker {
        background: linear-gradient(135deg, #2c3e50, #3498db);
        color: white;
        padding: 0.75rem 0;
        margin: 1.5rem 0;
        overflow: hidden;
        border-radius: 8px;
    }

    .news-container {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
    }

    .news-label {
        background-color: #f39c12;
        padding: 0.5rem 1rem;
        font-weight: 600;
        margin-right: 1.25rem;
        border-radius: 4px;
        flex-shrink: 0;
        z-index: 1;
        display: flex;
        align-items: center;
    }

    .news-content-wrapper {
        flex-grow: 1;
        overflow: hidden;
        position: relative;
        height: 1.5em;
    }

    .news-content {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: ticker 20s linear infinite;
        position: absolute;
        top: 0;
        left: 0;
    }

    .news-ticker:hover .news-content {
        animation-play-state: paused;
    }

    @keyframes ticker {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    
    @media (max-width: 768px) {
        .content-container {
            padding: 15px;
        }
        
        .news-container {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .news-label {
            margin-bottom: 0.75rem;
            margin-right: 0;
        }
        
        .news-content {
            white-space: normal;
            animation: none;
            padding-left: 0;
            position: static;
        }
        
        .notifications-table th, 
        .notifications-table td {
            padding: 8px;
            font-size: 0.9rem;
        }
    }
    
    .empty-state {
        text-align: center;
        padding: 40px;
        color: #7f8c8d;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #bdc3c7;
    }
</style>

<body>
        <h1 class="text-center text-uppercase stylish-header"><strong>Notifications</strong></h1>
        
        <!-- News Ticker -->
        <div class="news-ticker">
            <div class="container">
                <div class="news-container">
                    <div class="news-label">
                        <i class="fas fa-bullhorn me-2"></i>LATEST NEWS
                    </div>
                    <div class="news-content-wrapper">
                        <div class="news-content" id="newsContent">
                            Loading latest updates... 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-bell me-2"></i>All Notifications</h5>
            </div>
            <div class="card-body">
                <?php if (empty($file_data)): ?>
                    <div class="empty-state">
                        <i class="far fa-folder-open"></i>
                        <h3>No Notifications Found</h3>
                        <p>There are currently no notifications available. Please check back later.</p>
                    </div>
                <?php else: ?>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered notifications-table">
                            <thead>
                                <tr>
                                    <th width="22%"><i class="far fa-calendar-alt me-2"></i>Date</th>
                                    <th width="60%"><i class="far fa-file-alt me-2"></i>Title</th>
                                    <th width="18%"><i class="fas fa-download me-2"></i>Download</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($file_data as $data): ?>
                                    <tr>
                                        <td><?= $data['date']->format('d M, Y') ?></td>
                                        <td><?= htmlspecialchars($data['title']) ?></td>
                                        <td>
                                            <?php
                                            $icon = '';
                                            $class = '';
                                            switch($data['ext']) {
                                                case 'pdf':
                                                    $icon = 'far fa-file-pdf';
                                                    $class = 'pdf-link';
                                                    break;
                                                case 'docx':
                                                    $icon = 'far fa-file-word';
                                                    $class = 'docx-link';
                                                    break;
                                                case 'txt':
                                                    $icon = 'far fa-file-alt';
                                                    $class = 'txt-link';
                                                    break;
                                                default:
                                                    $icon = 'far fa-file';
                                                    $class = 'pdf-link';
                                            }
                                            ?>
                                            <a href="<?= $dir . $data['file'] ?>" target="_blank" class="file-link <?= $class ?>">
                                                <i class="<?= $icon ?> file-icon"></i>
                                                Download
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>

    <script>
    // Enhanced news ticker with error handling
    async function fetchNews() {
        const newsContent = document.getElementById('newsContent');
        
        try {
            // Show loading state
            newsContent.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Loading updates...';
            
            const response = await fetch('data/news.txt');
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const newsText = await response.text();
            
            if (!newsText.trim()) {
                throw new Error('News file is empty');
            }
            
            // Process news items
            const newsItems = newsText.split('|')
                .map(item => item.trim())
                .filter(item => item.length > 0);
            
            if (newsItems.length === 0) {
                throw new Error('No valid news items found');
            }
            
            // Create HTML for news items with icons
            const formattedNews = newsItems.map(item => 
                `<span><i class="fas fa-chevron-right me-2"></i>${item}</span>`
            ).join('<span class="mx-3">|</span>');
            
            newsContent.innerHTML = formattedNews;
            adjustTickerSpeed();
            
        } catch (error) {
            console.error('Error loading news:', error);
            newsContent.innerHTML = 
                '<i class="fas fa-exclamation-triangle me-2"></i>Important updates will be shown here.';
        }
    }
    
    function adjustTickerSpeed() {
        const newsContent = document.getElementById('newsContent');
        const wrapper = newsContent.parentElement;
        
        const contentWidth = newsContent.scrollWidth;
        const containerWidth = wrapper.clientWidth;
        
        if (contentWidth > containerWidth) {
            // Calculate duration based on content length (longer content scrolls faster)
            const duration = Math.max(15, contentWidth / 50);
            newsContent.style.animationDuration = `${duration}s`;
            
            // Pause on hover
            newsContent.addEventListener('mouseenter', () => {
                newsContent.style.animationPlayState = 'paused';
            });
            
            newsContent.addEventListener('mouseleave', () => {
                newsContent.style.animationPlayState = 'running';
            });
        } else {
            // Center content if it fits
            newsContent.style.animation = 'none';
            newsContent.style.paddingLeft = '0';
            newsContent.style.textAlign = 'center';
        }
    }
    
    // Initialize when DOM is loaded
    document.addEventListener('DOMContentLoaded', fetchNews);
    
    // Adjust on window resize
    window.addEventListener('resize', () => {
        if (document.getElementById('newsContent').innerHTML.includes('fa-chevron-right')) {
            adjustTickerSpeed();
        }
    });
    </script>

    <?php include('footer_new.php'); ?>
</body>
</html>