残り時間をpietimer.jsで把握させたい

現在、2時間制の入退室管理アプリを作っていまして、残り時間をpietimer.jsを使って、パーセンテージで表示させています。

円タイマーを表示させることはできましたが、現在の設定だと、2時間の設定にしかなっていないので更新すると０％になってしまいます。

目標としては、DBの中にある入室時間を紐付けて、リアルタイムで動くようにしたいです。

コードは以下の通りです。

php
1<?php
2session_start();
3include('functions.php');
4check_session_id();
5
6//DB接続の設定
7$pdo = connect_to_db();
8
9$user_id = $_SESSION["id"];
10$user_name = $_SESSION["name"];
11$status = $_SESSION["status"];
12
13//statusによる振り分け
14if ($status == 1) {
15    $timer = 1;
16} else {
17    $timer = 0;
18}
19// var_dump($timer);
20// exit();
21
22//入室時間と退室時間の定義
23$sql = 'SELECT * FROM inout_table LEFT OUTER JOIN users_table ON inout_table.user_id = users_table.id WHERE user_id = :user_id';
24
25$stmt = $pdo->prepare($sql);
26$stmt->bindValue(':user_id', $user_id, PDO::PARAM_STR);
27$status = $stmt->execute();
28
29// データ登録処理後
30if ($status == false) {
31    // SQL実行に失敗した場合はここでエラーを出力し，以降の処理を中止する
32    $error = $stmt->errorInfo();
33    echo json_encode(["error_msg" => "{$error[2]}"]);
34    exit();
35} else {
36    $record = $stmt->fetch(PDO::FETCH_ASSOC);
37    $intime = $record["in_time"];
38    $outtime = date("H:i:s", strtotime($intime . "+2 hour"));
39}
40
41?>
42
43<!DOCTYPE html>
44<html lang="ja">
45
46<head>
47    <meta charset="UTF-8">
48    <meta name="viewport" content="width=device-width, initial-scale=1.0">
49    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
50    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
51    <link rel="stylesheet" type="text/css" href="css/home.css">
52    <title>ホーム画面</title>
53</head>
54
55<body>
56    <header>
57        <p id="name"><?= $user_name ?>様</p>
58        <img id="setting" src="image/setting.png">
59    </header>
60    <div class="limit">
61        <table class="table_box">
62            <tr>
63                <th>入室時間</th>
64                <th>退室時間</th>
65            </tr>
66            <tr>
67                <td class="time"><?= $intime ?></td>
68                <td class="time"><?= $outtime ?></td>
69            </tr>
70        </table>
71        <!-- 残りパーセンテージ表示 -->
72        <div id="timer"></div>
73    </div>
74
75    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
76    <script type="text/javascript" src="pietimer/jquery.pietimer.js"></script>
77    <script type="text/javascript">
78        if (<?= $timer ?> == 1) {
79            $(function() {
80                $('#timer').pietimer({
81                    timerSeconds: 7200, //時間の設定（2時間）
82                    color: '#00bfff',
83                    fill: false, //円周をなぞる
84                    showPercentage: true, //パーセンテージの表示
85                    callback: function() {
86                        alert("2時間経過しました、退出してください。10分以内に延長料金が発生します"); //時間経過したらアラート
87                        $('#timer').pietimer('reset');
88                    }
89                });
90            });
91        }
92    </script>
93</body>
94
95</html>