Untitled

<?php
    function getInfo($number) {
        $path = 'http://localhost/project/api.php?number=' . $number;

        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $path);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HEADER, false);
        $result = curl_exec($curl);
        curl_close($curl);

        $result = json_decode($result, true);
        return $result;
    }

    function prevDay($date) {
        $daysOfMonth = array(31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        $day = (int)substr($date, 0, 2);
        $month = (int)substr($date, 3, 2);
        $year = (int)substr($date, 6, 4);

        if ($day > 1) {
            --$day;
        } else if ($month > 1) {
            --$month;
            $day = $daysOfMonth[$month - 1];
        } else {
            --$year;
            $day = 31;
            $month = 12;
        }

        if ($day < 10) {
            $day = '0' . $day;
        }

        if ($month < 10) {
            $month = '0' . $month;
        }

        return $day . '/' . $month . '/' . $year;
    }

    $number = isset($_GET['number']) ? $_GET['number'] : '';
    $path = 'http://localhost/project/dashboard.php?number=' . $number;
    $page = isset($_GET['page']) ? $_GET['page'] : 1;

    $info = getInfo($number);
    $names = array('Transaction ID', 'Transaction Type', 'Phone Type', 'City', 'Region', 'Start Time UTC', 'Start Time Local',
                   'Connect Duration', 'IVR Duration');
?>

<!DOCTYPE html>

<html>
    <head>
        <title>Dashboard Page</title>

        <link rel='stylesheet' href='style.css' />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type='text/javascript'>
            $(document).ready(function() {
                var names = ['Transaction ID', 'Transaction Type', 'Phone Type', 'City', 'Region', 'Start Time UTC', 'Start Time Local',
                             'Connect Duration', 'IVR Duration'];

                $('.option input[type=checkbox]').prop('checked', true);

                for (let i = 0; i < names.length; ++i) {
                    $('.option #' + i).change(function() {
                        $('table.info tr').each(function(index) {
                            $(this).children(':nth-child(' + (i + 1) + ')').toggle();
                        })
                    });
                }
            });
        </script>
    </head>

    <body>
        <div class='wrap'>
            <div class='navbar'>
                <img src='...' alt='logo' />
                <span class='datetime'><?php echo $number ?></span>
            </div>

            <div class='container'>
                <svg width='1025' height='200' style='font-family:"Lucida Grande", "Lucida Sans Unicode",
                Arial, Helvetica, sans-serif;font-size:12px; background-color: white; display: block; margin: 10px auto;'>

                    <?php
                        $dates = array();
                        $currDate = '';

                        foreach (array_reverse($info) as $row) {
                            $day = substr($row[6], 8, 2);
                            $month = substr($row[6], 5, 2);
                            $year = substr($row[6], 0, 4);
                            $key = $day . '/' . $month . '/' . $year;

                            if ($currDate == '') {
                                $currDate = $key;
                            }

                            if (array_key_exists($key, $dates)) {
                                $dates[$key] += 1;
                            } else {
                                $dates[$key] = 1;
                            }
                        }

                        for ($i = 9; $i >= 0; --$i) {
                            echo '<text x="' . ($i * 100 + 30) . '" y="200" fill="black">' . $currDate . '</text>';
                            echo '<circle cx="' . ($i * 100 + 60) . '" cy= "' . ((7 - $dates[$currDate]) * 25 - 5) . '" r="5" fill="red" />';
                            $prevDate = prevDay($currDate);

                            if ($i > 0) {
                                echo '<line x1="'. ($i * 100 + 60) . '" y1="' . ((7 - $dates[$currDate]) * 25 - 5) . '" x2="' .
                                (($i - 1) * 100 + 60) . '" y2="' . ((7 - $dates[$prevDate]) * 25 - 5) . '" stroke="orange" stroke-width="3" />';
                            }

                            $currDate = $prevDate;
                        }

                        for ($i = 0; $i <= 6; $i += 2) {
                            echo '<text x="0" y="' . (7 - $i) * 25 . '" fill="black">' . $i . '</text>';
                            echo '<line x1="10" y1="' . ((7 - $i) * 25 - 5) . '" x2="1025" y2="' . ((7 - $i) * 25 - 5) . '"
                            style="stroke:rgb(100,50,50); stroke-width:2" />';
                        }
                    ?>
                </svg>
                <span class='calls'>Total calls: <?php echo count($info); ?></span>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Display
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                    <?php
                        for ($i = 0; $i < count($names); ++$i) {
                            echo '<li><a href="#"><div class="form-check option">';
                            echo '<input class="form-check-input" type="checkbox" value="' . $names[$i] . '" id="' . $i . '">';
                            echo '<label class="form-check-label" for="' . $i . '">' . $names[$i] . '</label>';
                            echo '</div></li></a>';
                        }
                    ?>
                    </ul>
                </div>

                <table class='table table-striped info'>
                    <thead>
                        <tr>
                            <?php
                                foreach ($names as $elem) {
                                    echo '<th scope="col">' . $elem . '</th>';
                                }
                            ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $lenPerPage = 4;

                            for ($i = $lenPerPage * ($page - 1); $i < min($lenPerPage * $page, count($info)); ++$i) {
                                $row = $info[$i];
                                echo '<tr>';

                                foreach ($row as $elem) {
                                    echo '<td>' . $elem . '</td>';
                                }

                                echo '</tr>';
                            }
                        ?>
                    </tbody>
                </table>

                <nav id='pagination' aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item <?php if ($page == 1) { echo 'disabled'; } ?>">
                            <a class="page-link" href='<?php echo $path . '&page=' . ($page - 1) ?>' aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item <?php if ($lenPerPage * $page >= count($info)) { echo 'disabled'; } ?>">
                            <a class="page-link" href='<?php echo $path . '&page=' . ($page + 1) ?>' aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class='footer'>
            </div>
        </div>
    </body>
</html>