<?php
// Set page title before including header
$pageTitle = "Foundation of Retired Teachers (FORT) - E&SE Kotli";
include_once 'header_new.php'; 

// Sample FORT members data (You should replace this with database data)
$fort_members = [
    [
        'sr' => 1,
        'name' => 'AAA',
        'previous_designation' => 'Principal',
        'fort_designation' => 'President',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 2,
        'name' => 'BBB',
        'previous_designation' => 'SSS English',
        'fort_designation' => 'Vice President',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 3,
        'name' => 'CCC',
        'previous_designation' => 'Headmaster',
        'fort_designation' => 'General Secretary',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 4,
        'name' => 'DDD',
        'previous_designation' => 'Headmaster',
        'fort_designation' => 'Treasurer',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 5,
        'name' => 'EEE',
        'previous_designation' => 'SST',
        'fort_designation' => 'Executive Member',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 6,
        'name' => 'FFF',
        'previous_designation' => 'SST',
        'fort_designation' => 'Advisory Board Member',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 7,
        'name' => 'GGG',
        'previous_designation' => 'SST',
        'fort_designation' => 'Public Relations Officer',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 8,
        'name' => 'HHH',
        'previous_designation' => 'EST',
        'fort_designation' => 'Academic Coordinator',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 9,
        'name' => 'III',
        'previous_designation' => 'CI',
        'fort_designation' => 'IT Committee Head',
        'contact' => '+92-000-0000000'
    ],
    [
        'sr' => 10,
        'name' => 'JJJ',
        'previous_designation' => 'EST',
        'fort_designation' => 'Cultural Committee Head',
        'contact' => '+92-000-0000000'
    ]
];

// Directory path for FORT notifications (if needed)
$dir = 'notifications/';
$files = array_diff(scandir($dir), array('.', '..'));
$file_data = array();

foreach ($files as $file) {
    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])
        );
    }
}

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);
        margin-bottom: 30px;
    }
    
    .card-header {
        background: linear-gradient(135deg, #2c3e50, #4a6491);
        color: white;
        border-radius: 8px 8px 0 0 !important;
        padding: 20px;
    }
    
    .card-header h5 {
        margin: 0;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
    }
    
    .table-responsive {
        overflow-x: auto;
        border-radius: 0 0 8px 8px;
    }
    
    .fort-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

    .fort-table th {
        background-color: #34495e;
        color: white;
        padding: 15px 12px;
        text-align: left;
        font-weight: 600;
        border: none;
        position: sticky;
        top: 0;
    }

    .fort-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
        transition: all 0.2s ease;
    }

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

    .fort-table tr:hover td {
        background-color: #e8f4fc;
        transform: scale(1.005);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .member-name {
        font-weight: 600;
        color: #2c3e50;
    }
    
    .previous-designation {
        color: #7f8c8d;
        font-size: 0.9rem;
        margin-top: 3px;
    }
    
    .fort-designation {
        color: #e74c3c;
        font-weight: 600;
        padding: 4px 10px;
        background-color: #ffeaea;
        border-radius: 4px;
        display: inline-block;
        font-size: 0.9rem;
    }
    
    .fort-designation.president {
        background-color: #e8f4fc;
        color: #2980b9;
        border-left: 3px solid #2980b9;
    }
    
    .fort-designation.vice-president {
        background-color: #f0f8e8;
        color: #27ae60;
        border-left: 3px solid #27ae60;
    }
    
    .fort-designation.secretary {
        background-color: #fff8e1;
        color: #f39c12;
        border-left: 3px solid #f39c12;
    }
    
    .fort-designation.treasurer {
        background-color: #f3e5f5;
        color: #8e44ad;
        border-left: 3px solid #8e44ad;
    }
    
    .contact-cell {
        direction: ltr;
        text-align: right;
    }
    
    .contact-link {
        color: #3498db;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    .contact-link:hover {
        color: #2980b9;
        text-decoration: underline;
    }
    
    /* FORT Info Box */
    .fort-info-box {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-left: 4px solid #f39c12;
        padding: 20px;
        border-radius: 6px;
        margin-bottom: 25px;
    }
    
    .fort-info-box h6 {
        color: #2c3e50;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .fort-info-box p {
        margin: 0;
        color: #555;
        line-height: 1.6;
    }
    
    /* Stats Cards */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        border-top: 4px solid #3498db;
        transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
    }
    
    .stat-card.orange {
        border-top-color: #f39c12;
    }
    
    .stat-card.green {
        border-top-color: #2ecc71;
    }
    
    .stat-card.purple {
        border-top-color: #9b59b6;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 10px 0;
    }
    
    .stat-label {
        color: #7f8c8d;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    /* 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;
        }
        
        .stats-container {
            grid-template-columns: 1fr;
        }
        
        .fort-table th, 
        .fort-table td {
            padding: 8px;
            font-size: 0.9rem;
        }
        
        .fort-table {
            display: block;
        }
        
        .fort-table thead {
            display: none;
        }
        
        .fort-table tr {
            display: block;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
        }
        
        .fort-table td {
            display: block;
            text-align: right;
            padding-left: 50%;
            position: relative;
            border-bottom: 1px solid #eee;
        }
        
        .fort-table td:before {
            content: attr(data-label);
            position: absolute;
            left: 12px;
            width: calc(50% - 12px);
            padding-right: 10px;
            font-weight: 600;
            text-align: left;
            color: #2c3e50;
        }
        
        .contact-cell {
            text-align: right;
        }
    }
    
    .empty-state {
        text-align: center;
        padding: 40px;
        color: #7f8c8d;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #bdc3c7;
    }
    
    .fort-designation-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    .designation-key {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 6px;
    }
    
    .designation-key-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.85rem;
    }
    
    .designation-color {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }
    
    .president-color { background-color: #2980b9; }
    .vice-president-color { background-color: #27ae60; }
    .secretary-color { background-color: #f39c12; }
    .treasurer-color { background-color: #8e44ad; }
    .member-color { background-color: #e74c3c; }
</style>

<body>
    <div class="content-container">
        <h1 class="text-center text-uppercase stylish-header">
            <strong>Foundation Of Retired Teachers (FORT)</strong>
        </h1>
        
        <!-- FORT Information -->
        <div class="fort-info-box">
            <h6><i class="fas fa-info-circle"></i> About FORT</h6>
            <p>The Foundation of Retired Teachers (FORT) is a platform established to honor and connect retired educators of E&SE Kotli. It serves as a network for knowledge sharing, mentorship programs, and maintaining the legacy of our esteemed retired faculty members.</p>
        </div>
        
        <!-- Stats Cards -->
        <div class="stats-container">
            <div class="stat-card">
                <i class="fas fa-users fa-2x" style="color: #3498db;"></i>
                <div class="stat-number"><?php echo count($fort_members); ?></div>
                <div class="stat-label">Total Members</div>
            </div>
            <div class="stat-card orange">
                <i class="fas fa-user-tie fa-2x" style="color: #f39c12;"></i>
                <div class="stat-number">4</div>
                <div class="stat-label">Executive Members</div>
            </div>
            <div class="stat-card green">
                <i class="fas fa-graduation-cap fa-2x" style="color: #2ecc71;"></i>
                <div class="stat-number">8</div>
                <div class="stat-label">Professors</div>
            </div>
            <div class="stat-card purple">
                <i class="fas fa-handshake fa-2x" style="color: #9b59b6;"></i>
                <div class="stat-number">6</div>
                <div class="stat-label">Active Committees</div>
            </div>
        </div>
        
        <!-- 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>FORT UPDATES
                    </div>
                    <div class="news-content-wrapper">
                        <div class="news-content" id="newsContent">
                            FORT Executive Meeting Scheduled for December 15, 2023 • New Mentorship Program Launching in January • FORT Scholarship Applications Open • Annual General Body Meeting on November 30 • Knowledge Sharing Session on December 5 • 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- FORT Members Table -->
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-users me-2"></i>FORT Members Directory</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="fort-table">
                        <thead>
                            <tr>
                                <th width="5%">Sr#</th>
                                <th width="25%">Name</th>
                                <th width="30%">Previous Designation</th>
                                <th width="20%">Designation in FORT</th>
                                <th width="20%">Contact</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($fort_members as $member): 
                                // Determine CSS class for FORT designation
                                $fort_class = '';
                                $designation_lower = strtolower($member['fort_designation']);
                                if (strpos($designation_lower, 'president') !== false) {
                                    $fort_class = 'president';
                                } elseif (strpos($designation_lower, 'vice president') !== false) {
                                    $fort_class = 'vice-president';
                                } elseif (strpos($designation_lower, 'secretary') !== false) {
                                    $fort_class = 'secretary';
                                } elseif (strpos($designation_lower, 'treasurer') !== false) {
                                    $fort_class = 'treasurer';
                                }
                            ?>
                            <tr>
                                <td data-label="Sr#"><?php echo $member['sr']; ?></td>
                                <td data-label="Name">
                                    <div class="member-name"><?php echo $member['name']; ?></div>
                                </td>
                                <td data-label="Previous Designation">
                                    <div class="previous-designation">
                                        <i class="fas fa-user-graduate me-1"></i>
                                        <?php echo $member['previous_designation']; ?>
                                    </div>
                                </td>
                                <td data-label="Designation in FORT">
                                    <span class="fort-designation <?php echo $fort_class; ?>">
                                        <i class="fas fa-award me-1"></i>
                                        <?php echo $member['fort_designation']; ?>
                                    </span>
                                </td>
                                <td data-label="Contact" class="contact-cell">
                                    <a href="tel:<?php echo str_replace('-', '', $member['contact']); ?>" class="contact-link">
                                        <i class="fas fa-phone"></i>
                                        <?php echo $member['contact']; ?>
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                
                <!-- Designation Key -->
                <div class="designation-key">
                    <div class="designation-key-item">
                        <span class="designation-color president-color"></span>
                        <span>President</span>
                    </div>
                    <div class="designation-key-item">
                        <span class="designation-color vice-president-color"></span>
                        <span>Vice President</span>
                    </div>
                    <div class="designation-key-item">
                        <span class="designation-color secretary-color"></span>
                        <span>Secretary</span>
                    </div>
                    <div class="designation-key-item">
                        <span class="designation-color treasurer-color"></span>
                        <span>Treasurer</span>
                    </div>
                    <div class="designation-key-item">
                        <span class="designation-color member-color"></span>
                        <span>Committee Members</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Additional Information -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-bullseye me-2"></i>FORT Objectives</h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check-circle text-success me-2"></i> Knowledge sharing and mentorship programs</li>
                            <li><i class="fas fa-check-circle text-success me-2"></i> Alumni engagement and networking</li>
                            <li><i class="fas fa-check-circle text-success me-2"></i> Educational research and publications</li>
                            <li><i class="fas fa-check-circle text-success me-2"></i> Community outreach initiatives</li>
                            <li><i class="fas fa-check-circle text-success me-2"></i> Faculty development workshops</li>
                            <li><i class="fas fa-check-circle text-success me-2"></i> Scholarship programs for students</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-handshake me-2"></i>FORT Leadership</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong>President:</strong></p>
                                <p>AAA</p>
                            </div>
                            <div class="col-6">
                                <p class="mb-2"><strong>Vice President:</strong></p>
                                <p>BBB</p>
                            </div>
                            <div class="col-6">
                                <p class="mb-2"><strong>General Secretary:</strong></p>
                                <p>CCC</p>
                            </div>
                            <div class="col-6">
                                <p class="mb-2"><strong>Treasurer:</strong></p>
                                <p>DDD</p>
                            </div>
                        </div>
                        <hr>
                        <p><i class="fas fa-envelope me-2 text-primary"></i> <strong>Email:</strong> fort@esekotli.edu.pk</p>
                        <p><i class="fas fa-phone me-2 text-primary"></i> <strong>Office:</strong> +92-0000-000000</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Mobile responsive table labels
        document.addEventListener('DOMContentLoaded', function() {
            const tableCells = document.querySelectorAll('.fort-table td');
            const headers = ['Sr#', 'Name', 'Previous Designation', 'Designation in FORT', 'Contact'];
            
            tableCells.forEach((cell, index) => {
                const headerIndex = index % 5;
                cell.setAttribute('data-label', headers[headerIndex]);
            });
        });
    </script>
    
    <?php include('footer_new.php'); ?>
</body>
</html>