Untitled

<html>
<head>

<?php include 'connectionDetails.php'; ?>
<?php include 'login_form.php'; ?>

<?php
if(!isset($_SESSION['loggedin'])){ //if login in session is not set
    header("Location: index.php");
}
?>

<title>Juan - Clients</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="styles/igotswag.css" type="text/css">
<link rel="stylesheet" href="styles/swaganimations.css" type="text/css">

</head>
<body>

<!-- Header Area -->
<table class="header-container" style="width: 100%;">
    <tr>
        <td style="width: 40%; text-align: left;"><a href="index.php"><img class="hover-cursor" src="Images/TEAMS_Logo.png"></a></td>
        <td style="width: 10%; text-align: center;" class="custom-header custom-font">TEAMS
            <span style="color: #cc2020" class="custom-font">J</span><span style="color: #1a488c" class="custom-font">U</span><span style="color: #2a9e56" class="custom-font">A</span><span style="color: #d87f0a" class="custom-font">N </span><span style="font-size: 30px;" class="glyphicon glyphicon-globe"></span></td>
        <td style="width: 40%; text-align: right; font-size: 18px; vertical-align: bottom;" class="custom-font">
<?php
        if (isset($_SESSION["username"]))
        {
           echo $_SESSION["username"];
           echo "&nbsp;&nbsp;";
           echo "<span style='font-size: 20px; vertical-align: bottom; text-align: right;' class='fa fa-user'>&nbsp;&nbsp;&nbsp;</span>";
        }
?>
        </td>
    </tr>
</table>

<div class="pull-down-container">
    <div class="panel1">
        <br />
        <p>Now you see me!</p>
    </div>
    <p class="slide" style="text-align: center;">
        <div class="pull-me hvr-icon-hang" style="text-align: center; vertical-align: top;">More</div>
    </p>
</div>
<!-- End Header Area -->


<!-- Main Body Area -->
<div style="width: 100%; text-align: center;">

<div style="font-weight: bold; text-align: center; font-size: 30px; margin-bottom: 10px;" class="custom-font">Client Management</div>

<?php

$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
    $positive = $client['Pos'];
    $negative = $client['Neg'];
    $total = ($positive + $negative);

    // Calculate width in percentage
    if ($total > 0)
    {
        $positiveWidth = ($positive/$total)*100;
        $negativeWidth = ($negative/$total)*100;
    }
    else
    {
        $positiveWidth = "0%";
        $negativeWidth = "0%";
    }


    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; width: 100%'>" .

            "<div class='positive-container'>
                <div class='positive-bar hover-cursor' style='width: $positiveWidth;%;'></div>
            </div>

            <div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
            </div>" .

                 "<div id='client-name' class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .

            "<div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
            </div>

            <div class='negative-container'>
                <div class='negative-bar hover-cursor' style='width: $negativeWidth;%;'></div>
            </div>

         </div>
        <br />";
}

echo "</div>";

?>


</div>

<!-- Main Body Area -->


<!-- Footer Area -->


<!-- End Footer Area -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>