<?php
require_once "config.php";

// ถ้าล็อกอินอยู่แล้ว → ส่งไป dashboard
if (isset($_SESSION['uid'])) {
    header("Location: admin/dashboard.php");
    exit();
}

$error = "";

// ---------- เมื่อกดปุ่ม "เข้าสู่ระบบ" ใน Modal ----------
if ($_SERVER["REQUEST_METHOD"] === "POST") {

    $username = trim($_POST['username']);
    $password = trim($_POST['password']);

    $password_hash = hash("sha256", $password);

    $stmt = $conn->prepare("SELECT id, username, password_hash, role, fullname 
                            FROM users WHERE username=? LIMIT 1");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $res = $stmt->get_result();

    if ($res->num_rows === 1) {
        $u = $res->fetch_assoc();

        if ($password_hash === $u['password_hash']) {

            $_SESSION['uid']      = $u['id'];
            $_SESSION['username'] = $u['username'];
            $_SESSION['fullname'] = $u['fullname'];
            $_SESSION['role']     = $u['role'];

            echo "<script>
                    window.location='admin/dashboard.php';
                  </script>";
            exit();

        } else {
            $error = "รหัสผ่านไม่ถูกต้อง!";
        }
    } else {
        $error = "ไม่พบบัญชีผู้ใช้นี้!";
    }
}
?>

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chat Pack Beacon - Home</title>

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Prompt', sans-serif;
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    .card-box {
        background: #ffffff;
        border-radius: 18px;
        padding: 40px 30px;
        max-width: 450px;
        width: 90%;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .title {
        font-size: 28px;
        font-weight: 600;
        color: #2a5298;
        margin-bottom: 15px;
    }
    .subtitle {
        font-size: 15px;
        color: #555;
        margin-bottom: 25px;
    }
    .btn-login {
        background: #2a5298;
        border: none;
        padding: 12px 20px;
        font-size: 18px;
        width: 100%;
        border-radius: 10px;
        color: #fff;
        transition: 0.2s;
    }
    .btn-login:hover {
        background: #1d3d6d;
    }
    
/* Modal สีขาว */
.modal-content {
    background: #ffffff;
    color: #1e3c72; /* ตัวหนังสือใน modal */
    border-radius: 14px;
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* Header */
.modal-header {
    border-bottom: 1px solid #dbe3f5;
}

.modal-title {
    color: #1e3c72;
    font-weight: 600;
}

/* ปุ่มปิด X ให้เป็นสีน้ำเงิน */
.btn-close {
    filter: brightness(0) saturate(100%) invert(22%) sepia(54%) saturate(2000%) hue-rotate(200deg) brightness(95%) contrast(90%);
}

/* Footer */
.modal-footer {
    border-top: 1px solid #dbe3f5;
}

/* Label สีฟ้า / น้ำเงิน */
.modal-content label {
    color: #1e3c72;
    font-weight: 500;
}

/* Input field */
.modal-content .form-control {
    background: #f3f6ff;
    border: 1px solid #b7c6e8;
    color: #1e3c72;
}

.modal-content .form-control:focus {
    background: #ffffff;
    border-color: #3f7cff;
    box-shadow: 0 0 0 0.2rem rgba(63,124,255,0.25);
    color: #1e3c72;
}

/* ปุ่มเข้าสู่ระบบ */
.modal-content .btn-primary {
    background: #1d5cff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
}

.modal-content .btn-primary:hover {
    background: #0042e3;
}

    
</style>
</head>

<body>

<div class="card-box">
    <h2 class="title">Pack Beacon</h2>
    <p class="subtitle">ระบบจัดการ Beacon อัจฉริยะ</p>

    <!-- ปุ่มเปิด Modal -->
    <button class="btn btn-login" data-bs-toggle="modal" data-bs-target="#loginModal">
        เข้าสู่ระบบ
    </button>

    <p class="mt-3" style="color:#333;">© <?= date("Y") ?> All Rights Reserved</p>
</div>


<!-- ------------------------------------------------------
     Modal Login
------------------------------------------------------ -->
<div class="modal fade" id="loginModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <form method="POST">
      <div class="modal-header">
        <h5 class="modal-title">เข้าสู่ระบบ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

          <div class="mb-3">
              <label class="form-label">ชื่อผู้ใช้</label>
              <input type="text" name="username" class="form-control" required autofocus>
          </div>

          <div class="mb-3">
              <label class="form-label">รหัสผ่าน</label>
              <input type="password" name="password" class="form-control" required>
          </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-primary w-100">
            <i class="bi bi-box-arrow-in-right"></i> เข้าสู่ระบบ
        </button>
      </div>

      </form>

    </div>
  </div>
</div>


<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<!-- -----------------------------------------
     SweetAlert2 เมื่อ Login ไม่สำเร็จ
------------------------------------------ -->
<?php if (!empty($error)): ?>
<script>
Swal.fire({
    icon: 'error',
    title: 'เข้าสู่ระบบไม่สำเร็จ',
    text: '<?= $error ?>',
    confirmButtonText: 'ตกลง'
}).then(() => {
    let modal = new bootstrap.Modal(document.getElementById('loginModal'));
    modal.show(); // เปิด modal อีกรอบ
});
</script>
<?php endif; ?>


</body>
</html>
