<?php
session_start();
include("script/condb.php");


?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Transparent Quantities </title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	
h1{
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color:#FFF;
    font-size:14px;
    letter-spacing:1px;
    font-weight:300;
    text-align:center;
	margin-top: 35%;
}
	</style>
	<script>
    setTimeout(function(){ 
        document.getElementById('app').style['display'] = 'block';
        document.getElementById('splash').style['display'] = 'none';
    }, 5000);
</script>
	<script>
	function isvalid(){
		
		var userN = document.form.userN.value;
		var pswd = document.form.pswd.value;
		if (userN.length=="" && pswd.length==""){
			alert("username and pasword field is empty!!");
			return false
			
		}else{
			if(userN.length==""){
				alert("username field is empty!!");
			  return false
			} if(pswd.length==""){
				alert("password field is empty");
				return false
			}
		}
		
	}
	
	
	</script>
</head>

<body>

    <div id="app">
<div class="page-wrap-login">
	<div class="login-wrapper">
<!--ring div starts here-->
<div class="ring">
  <i style="--clr:#00ff0a;"></i>
  <i style="--clr:#ff0057;"></i>
  <i style="--clr:#fffd44;"></i>
</div>
<!--ring div ends here-->
<div class="pagewrap">
<div class="left-side">
<div class="logo"><img src="images/logo.png" width="243" height="50" alt=""/></div>
<div class="left_bottom">
<div class="bottom_header">Don't Just Build, Make Sure You Build <span>Transparently.</span></div>
	
<div class="bottom_body">Here is a place to write more information about the
above header, giving more insight to products and services.
Also as a medium of advertisement regarding updates and
other product feature.</div>
<div class="bottom-btn"><a href="logout.php">Log Out</a></div>
</div>
</div>
	
<div class="right-side-var">
<div class="splash-btn"><a href="dashboard.php">Create New Project</a></div>	
<div class="splash-btn-sec"><a href="#">View Projects</a></div>	
	

<div class="projects-display">
    <div class="project-header">Displaying Created Projects</div>

    <div class="projects-scroll-container" id="scrollBox">
        <table class="projects-table">
            <thead>
                <tr>
                    <th>Project Ref</th>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Date Added</th>
                </tr>
            </thead>
            <tbody id="scrollContent">
                <?php
                $sql = "SELECT project_ref, project_type, project_name, date_added 
                        FROM upline_app_project_info 
                        ORDER BY date_added DESC 
                        LIMIT 25";
                $result = $con->query($sql);

                if ($result && $result->num_rows > 0) {
                    while($row = $result->fetch_assoc()) {
                        $ref = htmlspecialchars($row['project_ref']);
                        echo "<tr class='clickable-row' data-href='project_detail.php?project_ref={$ref}'>
                                <td>{$ref}</td>
                                <td>".htmlspecialchars($row['project_type'])."</td>
                                <td>".htmlspecialchars($row['project_name'])."</td>
                                <td>".htmlspecialchars($row['date_added'])."</td>
                              </tr>";
                    }
                } else {
                    echo "<tr><td colspan='4'>No records found</td></tr>";
                }
                ?>
            </tbody>
        </table>
    </div>
</div>

<style>
.project-header {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
}
.projects-scroll-container {
    height: 400px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.projects-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.projects-table th, .projects-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.projects-table th {
    background: #f4f4f4;
}
.projects-table tbody tr:nth-child(even) {
    background: #fafafa;
}
.clickable-row {
    cursor: pointer;
    transition: background 0.2s;
}
.clickable-row:hover {
    background: #eaf4ff !important;
}
</style>

<script>
let scrollBox = document.getElementById("scrollBox");
let scrollContent = document.getElementById("scrollContent");
let speed = 30;
let scrollInterval;

// Duplicate rows for continuous scroll
scrollContent.innerHTML += scrollContent.innerHTML;

function startScroll() {
    scrollInterval = setInterval(() => {
        scrollBox.scrollTop += 1;
        if (scrollBox.scrollTop >= (scrollContent.scrollHeight / 2)) {
            scrollBox.scrollTop = 0;
        }
    }, speed);
}
function stopScroll() {
    clearInterval(scrollInterval);
}

scrollBox.addEventListener("mouseover", stopScroll);
scrollBox.addEventListener("mouseout", startScroll);

// Clickable row redirect
document.querySelectorAll(".clickable-row").forEach(row => {
    row.addEventListener("click", () => {
        window.location.href = row.dataset.href;
    });
});

// auto start
startScroll();
</script>

<!--<div class="project-header">Displaying Created Projects</div>
<div class="projects-details">Upline Innovation Cycle Limited</div>
<div class="projects-details-body">#676890075TQ</div>
<div class="projects-details-body">17/10/2025</div>-->
</div>
</div>	
</div></div></div></div>
</body>
</html>
