<style>
<?php include 'style.css'; ?>
</style>

<?php


class DBController
{
    private $host = "localhost";
    private $user = "root";
    private $password = "";
    private $database = "vro";
    private $conn;

    function __construct()
    {
        $this->conn = $this->connectDB();
    }

    function connectDB()
    {
        $conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
        return $conn;
    }

    function runQuery($query)
    {
        $result = mysqli_query($this->conn,$query);
        while($row=mysqli_fetch_assoc($result)) {
            $resultset[] = $row;
        }
        if(!empty($resultset))
        {
            return $resultset;
        }
        else
        {
            return False;
        }

    }

    function numRows($query)
    {
        $result  = mysqli_query($this->conn,$query);
        $rowcount = mysqli_num_rows($result);
        return $rowcount;
    }
}

function vc_make_graph()
{
    $db_handle = new DBController();
    # Show the customer dropdown
?>
    <div id="overall">
    <?php
    $results = show_customer_dropdown($db_handle);
    if (isset($results))
        if (!results)
            return '<h6>Database query NOT successful!</h6><br/>';
    # Show dates
    show_dates();
    show_cars();
?>
</div>
<?php
    show_pushbuttons();
}
add_shortcode('make_graph', 'vc_make_graph');


function show_customer_dropdown($handle)
{
    $query = 'SELECT CustomerID, FirstName, LastName FROM customers ORDER BY FirstName, LastName';
    $results = $handle->runQuery($query);
    if (!$results)
        return False;
    ?>
    <div class="inputs">
        <div class="lables">Customer:</div>
            <select name="user" id="user-list" class="demoInputBox" onChange="get_car(this.value);">
            <option value="">Select User</option>
        <?php
        foreach($results as $user)
        {?>
            <option value="<?php echo $user["CustomerID"]; ?>"><?php echo $user["FirstName"] . " " . $user["LastName"]; ?></option>
        <?php
        }
        ?>
        </select>
    </div>
<?php
}
?>
<?php

function show_dates()
{
?>

    <div class="inputs">
        <div class="lables">
            From Date:
        </div>
        <input type="date" name="fromdate" id = "datepicker1"><br>
        <div class="lables">
            To Date:
        </div>
        <input type="date" name="todate" id = "datepicker2">
    </div>
<?php
}

function show_cars()
{
?>
    <div class="inputs">
        <div class="lables">Select Car:</div>
            <select name="car" id="car-list" class="demoInputBox">
            <option value="">Select Car</option>
            </select>
    </div>
<?php
}
?>

<script>
function get_car($id)
{
    alert($id);
}
</script>

<?php

function show_pushbuttons()
{

}

.lables
{
    font-family: Arial;
    font-size: 20px;
}

.inputs
{
    font-family: Arial;
    font-size: 13px;
    width: 33%;
    min-width:200px;
    padding: 5px;
    float: left;
    text-align: center;
}

#overall
{
    border-color: #686363;
    border-style: solid;
    margin: auto;
    min-width: 200px;
}