<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICA Video Enterprise Sharing Platform (VESP)</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-dark-blue: #00264d;
            --primary-red: #ED1C24;
            --secondary-white: #FFFFFF;
            --background-color: #F0F4F8;
            --text-color: #333333;
            --border-radius: 10px;
            --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: var(--primary-dark-blue);
            color: var(--secondary-white);
            padding: 1.5rem 0;
            box-shadow: var(--box-shadow);
            margin-bottom: 20px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-container {
            display: flex;
            align-items: center;
        }

        .logo-image {
            height: 40px;
            margin-right: 10px;
        }

        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--secondary-white);
        }

        nav ul {
            list-style: none;
            display: flex;
            align-items: center;
        }

        nav li {
            margin-left: 20px;
        }

        nav a {
            color: var(--secondary-white);
            text-decoration: none;
            font-weight: 500;
            padding: 10px 15px;
            transition: background-color 0.3s, opacity 0.3s;
            border-radius: var(--border-radius);
        }

        nav a:hover, nav a.active {
            background-color: var(--primary-red);
        }

        .card {
            background: #ffffff;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 30px;
            margin-bottom: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        h1, h2, h3 {
            color: var(--primary-dark-blue);
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: var(--secondary-white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
        }

        th {
            background-color: var(--primary-dark-blue);
            color: var(--secondary-white);
        }

        tr:last-child td {
            border-bottom: none;
        }

        .badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .badge-pending { background-color: #FFA500; color: var(--secondary-white); }
        .badge-approved { background-color: #28A745; color: var(--secondary-white); }
        .badge-rejected { background-color: var(--primary-red); color: var(--secondary-white); }
        .badge-high { background-color: #d9534f; color: var(--secondary-white); }
        .badge-medium { background-color: #f0ad4e; color: var(--secondary-white); }
        .badge-low { background-color: #5bc0de; color: var(--secondary-white); }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        button {
            background-color: var(--primary-dark-blue);
            color: var(--secondary-white);
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        button:hover {
            transform: translateY(-3px);
            background-color: #001f3d;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        button.secondary {
            background-color: var(--secondary-white);
            color: var(--primary-dark-blue);
            border: 1px solid var(--primary-dark-blue);
        }

        button.secondary:hover {
            background-color: #e0e0e0;
        }

        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        input:focus, textarea:focus, select:focus {
            border-color: var(--primary-dark-blue);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .priority-select {
            width: auto;
            display: inline-block;
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }

            nav ul {
                margin-top: 10px;
            }

            nav li {
                margin-left: 0;
                margin-right: 20px;
            }
        }
    </style>
</head>
<body>
<header>
    <div class="container header-content">
        <div class="logo-container">
            <img src="https://file.go.gov.sg/icalogo.png" alt="ICA Logo" class="logo-image">
            <span class="logo-text">ICA Video Enterprise Sharing Platform</span>
        </div>
        <nav>
            <ul>
                <li><a href="#" class="nav-link active" data-target="dashboard">Dashboard</a></li>
                <li><a href="#" class="nav-link" data-target="upload">Upload</a></li>
                <li><a href="#" class="nav-link" data-target="requests">Requests</a></li>
                <li><a href="#" class="nav-link" data-target="cases">Cases</a></li>
                <li><a href="#" class="nav-link" data-target="analytics">Analytics</a></li>
                <li><a href="#" class="nav-link" data-target="admin">Admin</a></li>
                <li><a href="#" id="logout">Logout</a></li>
            </ul>
        </nav>
    </div>
</header>

<div id="dashboard" class="container tab-content active">
    <h1>Dashboard Overview</h1>
    <div class="stats-grid">
        <div class="card">
            <h3>Total Videos Uploaded</h3>
            <p>124 videos this month</p>
        </div>
        <div class="card">
            <h3>Requests Resolved within SLA</h3>
            <p>85% of requests this month</p>
        </div>
        <div class="card">
            <h3>Current Active Cases</h3>
            <p>12 ongoing cases</p>
        </div>
    </div>
</div>

<div id="upload" class="container tab-content">
    <h2>Upload Video Evidence</h2>
    <div class="card">
        <form id="upload-form">
            <label for="case-number">Case Number:</label>
            <input type="text" id="case-number" name="case-number" required>

            <label for="video-title">Video Title:</label>
            <input type="text" id="video-title" name="video-title" required>

            <label for="video-description">Description:</label>
            <textarea id="video-description" name="video-description" rows="4" required></textarea>

            <label for="video-file">Video File:</label>
            <input type="file" id="video-file" name="video-file" accept="video/*" required>

            <button type="submit">Upload Evidence</button>
        </form>
    </div>
</div>

<div id="requests" class="container tab-content">
    <h2>Video Evidence Requests</h2>
    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>Request ID</th>
                    <th>Requesting Party</th>
                    <th>Case Number</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>REQ-001</td>
                    <td>ICA Enforcement (Internal)</td>
                    <td>ICA-2023-005</td>
                    <td><span class="badge badge-high">High</span></td>
                    <td><span class="badge badge-pending">Pending</span></td>
                    <td>
                        <button onclick="approveRequest('REQ-001')">Approve</button>
                        <button class="secondary" onclick="rejectRequest('REQ-001')">Reject</button>
                    </td>
                </tr>
                <!-- Additional rows can be added here -->
            </tbody>
        </table>
    </div>
</div>

<div id="cases" class="container tab-content">
    <h2>Active Cases</h2>
    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>Case Number</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Last Updated</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ICA-2023-007</td>
                    <td>Unauthorized Entry Incident</td>
                    <td><span class="badge badge-pending">In Progress</span></td>
                    <td>2023-04-20</td>
                    <td><button onclick="viewCase('ICA-2023-007')">View Details</button></td>
                </tr>
                <tr>
                    <td>ICA-2023-008</td>
                    <td>Security Breach Investigation</td>
                    <td><span class="badge badge-approved">Accepted</span></td>
                    <td>2023-05-01</td>
                    <td><button onclick="viewCase('ICA-2023-008')">View Details</button></td>
                </tr>
                <tr>
                    <td>ICA-2023-009</td>
                    <td>Access Control Failure</td>
                    <td><span class="badge badge-rejected">Rejected</span></td>
                    <td>2023-03-28</td>
                    <td><button onclick="viewCase('ICA-2023-009')">View Details</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="analytics" class="container tab-content">
    <h2>Analytics Dashboard</h2>
    <div class="card">
        <h3>Video Uploads</h3>
        <p>This Month: 124 Videos</p>
        
        <h3>Request SLA Compliance</h3>
        <p>85% of requests met SLA</p>
        
        <h3>Priority Request Breakdown</h3>
        <ul>
            <li>High: 30%</li>
            <li>Medium: 50%</li>
            <li>Low: 20%</li>
        </ul>
    </div>
</div>

<div id="admin" class="container tab-content">
    <h2>Admin Panel</h2>
    <div class="card">
        <h3>Manage Users</h3>
        <form id="admin-manage-users-form">
            <label for="user-email">Email Address:</label>
            <input type="email" id="user-email" name="user-email" required>

            <label for="user-role">Role:</label>
            <select id="user-role" name="user-role">
                <option value="officer">Officer</option>
                <option value="admin">Admin</option>
            </select>

            <button type="submit">Add User</button>
        </form>
    </div>
    <div class="card">
        <h3>Current Users</h3>
        <table>
            <thead>
                <tr>
                    <th>User</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="user-list">
                <tr>
                    <td>Alice</td>
                    <td><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></td>
                    <td><button onclick="removeUser('alice@ica.gov.sg')">Remove</button></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></td>
                    <td><button onclick="removeUser('bob@ica.gov.sg')">Remove</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    // Function to handle visibility of page sections based on navigation
    function showSection(event) {
        const targetId = event.currentTarget.getAttribute('data-target');
        const sections = document.querySelectorAll('.container.tab-content');
        const navLinks = document.querySelectorAll('.nav-link');

        sections.forEach(section => section.classList.remove('active'));
        navLinks.forEach(link => link.classList.remove('active'));

        document.getElementById(targetId).classList.add('active');
        event.currentTarget.classList.add('active');
    }

    // Assign event listeners to navigation links
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', showSection);
    });

    // Mock functions for request approval and rejection
    function approveRequest(requestId) {
        alert(`Request ${requestId} approved.`);
    }

    function rejectRequest(requestId) {
        alert(`Request ${requestId} rejected.`);
    }

    // Function to view case details
    function viewCase(caseId) {
        alert(`Viewing details for case ${caseId}.`);
    }

    // Function to remove a user
    function removeUser(email) {
        const confirmRemoval = confirm(`Are you sure you want to remove the user with email: ${email}?`);
        if (confirmRemoval) {
            alert(`User ${email} removed successfully.`);
            const rows = document.querySelectorAll('#user-list tr');
            rows.forEach(row => {
                if (row.textContent.includes(email)) {
                    row.remove();
                }
            });
        }
    }

    // Function to add sorting to tables
    document.querySelectorAll('th').forEach(header => {
        header.addEventListener('click', function() {
            const table = header.closest('table');
            const tbody = table.querySelector('tbody');
            const rowsArray = Array.from(tbody.querySelectorAll('tr'));
            const headerIndex = Array.from(header.parentNode.children).indexOf(header);
            const isAsc = header.getAttribute('data-sort') === 'asc';

            rowsArray.sort((a, b) => {
                const aText = a.children[headerIndex].innerText;
                const bText = b.children[headerIndex].innerText;
                return isAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
            });

            rowsArray.forEach(row => tbody.appendChild(row));
            header.setAttribute('data-sort', isAsc ? 'desc' : 'asc');
        });
    });
</script>
</body>
</html>the role should be enforcement officer and ops officer and admin. in gist, the ops officer need to retrieve the footage, the enforcement officer need to request for the footage. can u redo the whole code to fit this problem statement?