<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORASS - Project Management Dashboard</title>
    <link rel="icon" type="image/png" href="https://kwarapoly.corass.ng/assets/Image/kp.png">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #024a00 0%, #00b30c 100%);
            min-height: 100vh;
            color: #333;
        }

        .dashboard-container {
            display: flex;
            min-height: 100vh;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            margin: 20px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* Sidebar Styles */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 0;
            position: relative;
            overflow-y: auto;
        }

        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .logo-section {
            padding: 30px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #fafafa, #ffffff);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
        }

        .logo-text {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .timestamp {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 15px;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 6px;
            border-left: 3px solid #27ae60;
        }

        .nav-section {
            padding: 20px 0;
            position: relative;
            z-index: 1;
        }

        .nav-item {
            margin: 5px 20px;
            padding: 15px 20px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            overflow: hidden;
        }

        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: #27ae60;
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .nav-item:hover::before,
        .nav-item.active::before {
            transform: scaleY(1);
        }

        .nav-item:hover,
        .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }

        .nav-item i {
            font-size: 16px;
            width: 20px;
            text-align: center;
        }

        .nav-item.active {
            background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(46, 204, 113, 0.1));
            color: #2ecc71;
        }

        .nav-section-title {
            padding: 20px 25px 10px;
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .nav-submenu {
            margin-left: 40px;
            margin-top: 5px;
        }

        .nav-submenu .nav-item {
            padding: 10px 15px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Main Content Styles */
        .main-content {
            flex: 1;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            padding: 25px 40px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 20px rgba(39, 174, 96, 0.2);
        }

        .header h1 {
            font-size: 28px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff, #f1f1f1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #27ae60;
            font-weight: bold;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .content-area {
            padding: 40px;
            flex: 1;
            overflow-y: auto;
        }

        .stats-card {
            background: linear-gradient(135deg, #fff, #f8fafc);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .stats-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #27ae60, #2ecc71, #3498db);
        }

        .stats-content {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .stats-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            box-shadow: 0 10px 25px rgba(39, 174, 96, 0.3);
        }

        .stats-info h2 {
            font-size: 48px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .stats-info p {
            color: #7f8c8d;
            font-size: 16px;
            font-weight: 500;
        }

        .filter-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            border: 1px solid #e1e8ed;
        }

        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .filter-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .filter-input {
            padding: 12px 20px;
            border: 2px solid #e1e8ed;
            border-radius: 10px;
            font-size: 14px;
            width: 300px;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        .filter-input:focus {
            outline: none;
            border-color: #27ae60;
            background: white;
            box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
        }

        .filter-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
        }

        .table-container {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            border: 1px solid #e1e8ed;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background: linear-gradient(135deg, #f8fafc, #e1e8ed);
            padding: 20px 15px;
            text-align: left;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e1e8ed;
        }

        .table td {
            padding: 20px 15px;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }

        .table tr:hover {
            background: #f8fafc;
        }

        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-approved {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .project-title {
            font-weight: 600;
            color: #2c3e50;
            line-height: 1.4;
            max-width: 300px;
        }

        .student-info {
            font-weight: 600;
            color: #27ae60;
        }

        .matric-number {
            font-family: 'Courier New', monospace;
            background: #f8fafc;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            color: #5a6c7d;
        }

        .action-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #f8fafc;
            color: #5a6c7d;
        }

        .action-btn:hover {
            background: #27ae60;
            color: white;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .dashboard-container {
                margin: 10px;
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .content-area {
                padding: 20px;
            }

            .filter-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-input {
                width: 100%;
            }

            .table-container {
                overflow-x: auto;
            }
        }

        .status-dropdown {
            position: relative;
            display: inline-block;
        }

        .status-btn {
            background: #3498db !important;
            color: white !important;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .status-btn:hover {
            background: #2980b9 !important;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border: 1px solid #e1e8ed;
            min-width: 180px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }

        .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-item {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: #2c3e50;
            transition: all 0.2s ease;
            border-bottom: 1px solid #f8fafc;
        }

        .dropdown-item:last-child {
            border-bottom: none;
        }

        .dropdown-item:hover {
            background: #f8fafc;
            color: #27ae60;
            transform: translateX(5px);
        }

        .dropdown-item i {
            width: 16px;
            text-align: center;
        }

        .view-btn {
            background: #95a5a6 !important;
            color: white !important;
        }

        .view-btn:hover {
            background: #7f8c8d !important;
        }

        .status-printed {
            background: linear-gradient(135deg, #e8f4fd, #d1ecf1);
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .status-pending {
            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        /* Animation for status change */
        .status-updating {
            animation: pulse 0.5s ease-in-out;
        }

        .stats-card {
            display: flex;
            justify-content: space-between;
            /* or use space-around / space-evenly */
            flex-wrap: wrap;
            /* allow wrapping on smaller screens */
            gap: 20px;
            /* optional spacing between cards */
        }

        .stats-content {
            background: #fff;
            border: 1px solid #eee;
            padding: 15px 20px;
            border-radius: 8px;
            flex: 1;
            min-width: 200px;
            /* ensures responsiveness */
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .stats-icon i {
            font-size: 30px;
            color: #ffffff;
        }

        .stats-info h2 {
            margin: 0;
            font-size: 24px;
        }

        .stats-info p {
            margin: 0;
            color: #666;
        }

        .filter-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-input,
        .filter-dropdown {
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            min-width: 180px;
            font-size: 14px;
        }

        .filter-btn {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .clear-btn {
            background-color: #dc3545;
        }

        .filter-btn i {
            margin-right: 5px;
        }

        .dropdown-menu {
            max-height: 200px;
            /* adjust as needed */
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 999;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="dashboard-container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="logo-section">
                <div class="logo">
                    <div class="logo-icon">
                        <img src="https://kwarapoly.corass.ng/assets/Image/kp.png" width="40px" alt="Kp logo">
                    </div>
                    <div class="logo-text">CORASS</div>
                </div>
                <div class="timestamp">
                    <i class="fas fa-clock"></i>
                    Mon Jul 07 2025 14:26:19 GMT+0100<br>
                    (West Africa Standard Time)
                </div>
            </div>

            <nav class="nav-section">
                <div class="nav-item active">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </div>

                <div class="nav-item">
                    <i class="fas fa-arrow-right-from-bracket"></i>
                    <a href="/user/logout" style="text-decoration: none;color: #fff;">Log Out </a>
                </div>

            </nav>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <header class="header">
                <h1>
                    <i class="fas fa-chart-line"></i>
                    Project Printing Officer Dashboard
                </h1>
                <div class="user-profile">
                    <div class="user-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <span>PPO</span>
                </div>
            </header>

            <div class="content-area">
                <iframe
                    src="https://docs.google.com/document/d/<%= doc?.slug%>/edit?api=1&key=AIzaSyD4pHemgDHxMtsSGH8gFPewHlMx2IqyZL0"
                    width="100%" height="800"></iframe>

            </div>

        </div>
    </div>
    <footer class="footer footer-light  footer-static  footer1 "
        style="color: #fff; text-align: center; font-size: larger;margin-bottom: 5px;">
        <p class="clearfix mb-0">
            <span class="float-md-start d-block d-md-inline-block mt-25 text-center">COPYRIGHT &copy;
                <script>document.write(new Date().getFullYear())</script><a class="ms-25" href="">CORASS</a>,
                <span class="d-inline-block">All rights Reserved</span>
            </span>
            <span class="float-md-end d-block text-center">Centralized Online Research Assessment and Submission
                System<i data-feather="file-text"></i></span>
        </p>
    </footer>
    <script>
        // Add some interactive functionality
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function () {
                // Remove active class from all items
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                // Add active class to clicked item
                this.classList.add('active');
            });
        });

        // Filter functionality
        document.querySelector('.filter-btn').addEventListener('click', function () {
            const input = document.querySelector('.filter-input');
            if (input.value.trim()) {
                // Simulate filtering
                console.log('Filtering by:', input.value);
                // Add visual feedback
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Filtering...';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-search"></i> Filter Record';
                }, 1000);
            }
        });

        // Status dropdown functionality
        function toggleStatusDropdown(button) {
            const dropdown = button.nextElementSibling;
            const isOpen = dropdown.classList.contains('show');

            // Close all other dropdowns
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                menu.classList.remove('show');
            });

            // Toggle current dropdown
            if (!isOpen) {
                dropdown.classList.add('show');
            }
        }

        // Update status functionality
        function updateStatus(item, newStatus) {
            const projectId = item.getAttribute('data-id');
            const row = item.closest('tr');
            const statusCell = row.querySelector('td:nth-child(5) .status-badge');
            const dropdown = item.closest('.dropdown-menu');

            // Close dropdown
            dropdown.classList.remove('show');

            // Add animation class
            // statusCell.classList.add('status-updating');

            // Send to backend
            fetch('http://localhost:4000/update-print-status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ id: projectId, status: newStatus }),
            })
                .then((res) => res.json())
                .then((data) => {
                    if (data.success) {
                        // Clear existing status classes
                        statusCell.classList.remove('status-approved', 'status-rejected', 'status-pending', 'status-printed');

                        switch (newStatus) {
                            case 'printed':
                                statusCell.classList.add('status-printed');
                                statusCell.innerHTML = '<i class="fas fa-print"></i> Printed';
                                break;
                            case 'rejected':
                                statusCell.classList.add('status-rejected');
                                statusCell.innerHTML = '<i class="fas fa-times-circle"></i> Rejected';
                                break;
                            case 'pending':
                                statusCell.classList.add('status-pending');
                                statusCell.innerHTML = '<i class="fas fa-clock"></i> Pending';
                                break;
                        }

                        showNotification(`Status updated to ${newStatus}`, 'success');
                    } else {
                        showNotification(data.message || 'Status update failed', 'error');
                    }

                    // statusCell.classList.remove('status-updating');
                })
                .catch((err) => {
                    console.error('Error:', err);
                    showNotification('Network error while updating status', 'error');
                    // statusCell.classList.remove('status-updating');
                });
        }


        // Notification system
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}"></i>
            ${message}
        `;

            // Add notification styles if not already added
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                .notification {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    padding: 15px 20px;
                    border-radius: 8px;
                    color: white;
                    font-weight: 500;
                    z-index: 10000;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    transform: translateX(400px);
                    transition: transform 0.3s ease;
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
                }
                .notification-success {
                    background: linear-gradient(135deg, #27ae60, #2ecc71);
                }
                .notification-info {
                    background: linear-gradient(135deg, #3498db, #5dade2);
                }
                .notification.show {
                    transform: translateX(0);
                }
            `;
                document.head.appendChild(style);
            }

            document.body.appendChild(notification);

            // Show notification
            setTimeout(() => notification.classList.add('show'), 100);

            // Hide and remove notification
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        // Close dropdowns when clicking outside
        document.addEventListener('click', function (event) {
            if (!event.target.closest('.status-dropdown')) {
                document.querySelectorAll('.dropdown-menu').forEach(menu => {
                    menu.classList.remove('show');
                });
            }
        });

        // Add hover effects and animations
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('mouseenter', function () {
                if (!this.classList.contains('status-btn')) {
                    this.style.transform = 'scale(1.1)';
                }
            });
            btn.addEventListener('mouseleave', function () {
                if (!this.classList.contains('status-btn')) {
                    this.style.transform = 'scale(1)';
                }
            });
        });
    </script>
    <script>
        function applyFilter() {
            const matricNumber = document.getElementById('matricInput').value;
            const status = document.getElementById('statusDropdown').value;

            // TODO: Implement your logic to filter based on values
            console.log('Filtering by:', { matricNumber, status });

            // Example: You could make an AJAX call or reload the page with query parameters
        }

        function clearFilter() {
            document.getElementById('matricInput').value = '';
            document.getElementById('statusDropdown').value = '';
        }
    </script>

</body>

</html>