<?php
include_once 'src/inc/db/function.php';
//echo "csrfToken= ".$_SESSION['csrfToken'] ;
$error = '';

if (isset($_REQUEST['action']) && !empty($_REQUEST['action']) && $_POST['action'] === 'login') {
    $mcsrfToken = $_POST['csrfToken']?? null;
      
    if ($mcsrfToken == $_SESSION['csrfToken'] && $_POST['action'] == 'login') {
        $account = isset($_POST['account']) && $_POST['account'] !== '' ? htmlspecialchars(trim($_POST['account']), ENT_QUOTES, 'UTF-8') : null;
        $password = isset($_POST['password']) && $_POST['password'] !== '' ? htmlspecialchars(trim($_POST['password']), ENT_QUOTES, 'UTF-8') : null;
        $validate = isset($_POST['validate']) && $_POST['validate'] !== '' ? htmlspecialchars(trim($_POST['validate']), ENT_QUOTES, 'UTF-8') : null;
        $error = login($account, $password);
        if (strtoupper($validate) === strtoupper($_SESSION['captcha'])) {
            $error = login($account, $password);
        } else {
            $error = '驗證碼錯誤！';
        }
    } else {
        $error = '請重新登入';
    }
} else if (!empty($_REQUEST['logout']) and strtoupper($_REQUEST['logout']) == "Y") {
    session_unset();
    session_destroy(); //删除当前用户对应的session文件以及释放session	
} 
/*else {
    unset($_REQUEST);
    session_unset();
    if (isset($_SESSION)) {
        session_destroy();
    }
    //删除当前用户对应的session文件以及释放session	 
}
*/


?>
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>海洋能及負碳高速運算資料管理平臺</title>
    <?php include_once "template_css.php"; ?>

    <script>
        $(function() {
            //刷新驗證碼(改變圖片連結  連結成功後改Session並產生圖)
            $('.verifyimage').on('click', function() {
                var random = Math.random();
                $('.verifyimage').each(function() {
                    $(this).attr('src', 'captcha.php');
                });
            });
        });

        window.onload = function() {
            // 检查 PHP 变量是否包含错误消息
            var errorMessage = "<?php echo $error; ?>";
            // 如果错误消息不为空，则显示警报消息
            if (errorMessage !== '') {
                if (errorMessage === '登入成功!') {
                    // 按下確定後跳轉到登入頁面
                    window.location.href = 'index.php';
                } else {
                    alert(errorMessage);
                }
            }
        };

        $(document).ready(function() {
            $('#saveButton').click(function(event) {
                var account = $('#account').val();
                var password = $('#password').val();
                var Validate = $('#Validate').val();

                // 檢查帳號是否為空
                if (account === '') {
                    alert('請輸入帳號');
                    event.preventDefault(); // 阻止表單提交
                    return;
                }

                // 檢查密碼是否為空
                if (password === '') {
                    alert('請輸入密碼');
                    event.preventDefault(); // 阻止表單提交
                    return;
                }

                // 檢查密碼是否至少包含 8 個字元
                if (password.length < 4) {
                    alert('密碼必須至少包含 4 個字元');
                    event.preventDefault(); // 阻止表單提交
                    return;
                }
              
                if (Validate === '') {
                    alert('請輸入驗證碼');
                    event.preventDefault(); // 阻止表單提交
                    return;
                }
                // 若通過所有檢查，表單將提交
            });
        });
    </script>
    <style>
        body {
            background-color: #f5faed;
        }

        .container {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            justify-content: space-between;
        }

        .main-content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
        }

        .login-form {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #footer {
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main-content">
            <form method="POST" action="" class="mt-4 mb-4" id="loginForm" enctype="multipart/form-data">
                <div class="login-form">
                    <input type="hidden" name="csrfToken" value="<?=$_SESSION['csrfToken']??'' ?>">
                    <h2 class="mb-3 fw-normal text-center" style="color: #323e35;">使用者登入</h2>
                    <div class="row mb-2">
                        <label class="form-label">帳號</label>
                        <div class="col">
                            <input type="text" class="form-control" id="account" name="account" placeholder="帳號" required>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="form-label">密碼</label>
                        <div class="col">
                            <input type="password" class="form-control" id="password" name="password" placeholder="密碼" required>
                        </div>
                    </div>
                    <br>
                    <div class="row mb-2">
                        <div class="col-5" style="cursor: pointer;" tabindex="0" data-bs-trigger="hover focus" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="可按圖片更換驗證碼">
                            <!-- <img id="verifyimage" class="verifyimage" src="~/Login/GetValidateCodeImage" /> -->
                            <img id="verifyimage" class="verifyimage" src="captcha.php" alt="Captcha Image" alt="<?= $_SESSION['captcha'] ?? 'img'; ?>">
                        </div>
                        <div class="col">
                            <input type="text" id="Validate" name="validate" class="form-control" placeholder="驗證碼..." required>
                        </div>
                    </div>
                    <br>

                    <div class="row text-center">
                        <div class="col-6">
                            <button class="btn btn-secondary  w-100" type="reset">取消</button>
                        </div>
                        <div class="col-6">
                            <button type="submit" id="saveButton" name="action" value="login" class="btn btn-primary w-100">送出</button>
                        </div>
                    </div>
                    <div class="row text-center mt-3">
                        <div class="col-6">
                            <!-- <p class="mb-0">帳號申請</p> -->
                            <a href="register.php" class="btn btn-outline-primary  w-100">帳號申請</a>
                        </div>
                        <div class="col-6">
                            <!-- <p class="mb-0">忘記密碼</p> -->
                            <a href="forgetPassword.php" class="btn btn-outline-primary w-100">忘記密碼</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <?php include_once "template_footer.php"; ?>
    <!--  <footer id="footer" style="background-color: #f1f1f1; font-size: 12px; padding: 10px 0;">  
        <div class="row">
            <div class="col-12 col-md-4 mb-3 mb-md-0" style="text-align: left;">
                <br>
                <div style="font-weight: bold; margin-bottom: 5px;">
                    海洋能及負碳高速運算資料管理平臺
                </div>
                <div>指導單位：</div>
                <div>執行單位：</div>
            </div>
            <div class="col-12 col-md-4 mb-3 mb-md-0">
                <br>
                <br>
                <div style="text-align: left; padding-left: 10px; border-left: 1px dashed #000;">
                    <div>聯絡單位：</div>
                    <div>聯絡信箱：</div>
                    <div>執行電話：</div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="row mb-3">
                    <div class="col-3">
                        <button>平台簡介</button>
                    </div>
                    <div class="col-3">
                        <button>執行團隊</button>
                    </div>
                    <div class="col-5">
                        <a>隱私權保護</a>
                        <a>網站安全政策</a>
                    </div>
                </div>
                <br>
                <br>
                <div>© 2024 財團國家實驗研究院國家高速網路與計算中心</div>
            </div>
        </div>
    </footer>   -->




</body>

</html>