<?php
session_start();
session_write_close();
require 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

$message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

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

    if ($password === '') {

        $message = "Please enter a new password.";

    } else {

        $new = password_hash($password, PASSWORD_DEFAULT);
        $id = $_SESSION['user_id'];

        $stmt = $conn->prepare("
            UPDATE users 
            SET password = ?, must_change_password = 0 
            WHERE id = ?
        ");

        $stmt->bind_param("si", $new, $id);
        $stmt->execute();

        unset($_SESSION['force_change']);

        header("Location: ess/dashboard.php");
        exit;
    }
}
?>

<!DOCTYPE html>
<html>
<head>

<title>Change Password - HR System</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

@keyframes float {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-animation{
    animation: float 5s ease-in-out infinite;
}

</style>

</head>

<body class="min-h-screen bg-gradient-to-br from-blue-700 via-blue-800 to-black flex items-center justify-center p-6 overflow-hidden">

<!-- BACKGROUND BLUR -->
<div class="absolute inset-0 overflow-hidden">

    <div class="absolute top-0 left-0 w-72 h-72 bg-blue-400 opacity-20 rounded-full blur-3xl"></div>

    <div class="absolute bottom-0 right-0 w-96 h-96 bg-cyan-400 opacity-20 rounded-full blur-3xl"></div>

</div>

<!-- CARD -->
<div class="relative z-10 w-full max-w-md">

    <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl overflow-hidden">

        <!-- HEADER -->
        <div class="p-8 text-center text-white">

            <div class="w-24 h-24 mx-auto rounded-full bg-white/20 flex items-center justify-center text-5xl mb-5 float-animation">
                🔐
            </div>

            <h1 class="text-4xl font-bold">
                Change Password
            </h1>

            <p class="text-blue-100 mt-2">
                Update your temporary password to continue
            </p>

        </div>

        <!-- FORM -->
        <div class="bg-white p-8 rounded-t-3xl">

            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">
                Security Verification
            </h2>

            <?php if ($message): ?>

            <div class="bg-red-100 border border-red-300 text-red-700 p-4 rounded-xl mb-5">

                <?php echo htmlspecialchars($message); ?>

            </div>

            <?php endif; ?>

            <form method="POST" class="space-y-5">

                <!-- PASSWORD -->
                <div>

                    <label class="block text-sm font-semibold text-gray-600 mb-2">
                        New Password
                    </label>

                    <div class="relative">

                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-lg">
                            🔒
                        </span>

                        <input
                        type="password"
                        name="password"
                        id="password"
                        placeholder="Enter new password"
                        required
                        class="w-full pl-12 pr-14 py-4 rounded-2xl border border-gray-300 focus:ring-4 focus:ring-blue-200 focus:border-blue-500 outline-none transition">

                        <!-- SHOW PASSWORD -->
                        <button
                        type="button"
                        onclick="togglePassword()"
                        class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition">

                            👁️

                        </button>

                    </div>

                </div>

                <!-- PASSWORD NOTE -->
                <div class="bg-blue-50 border border-blue-200 rounded-2xl p-4">

                    <p class="text-sm font-semibold text-blue-700 mb-2">
                        Password Requirements
                    </p>

                    <ul class="text-sm text-blue-600 space-y-1">

                        <li>• Minimum 8 characters recommended</li>
                        <li>• Use letters and numbers</li>
                        <li>• Avoid common passwords</li>

                    </ul>

                </div>

                <!-- BUTTON -->
                <button
                type="submit"
                class="w-full bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white py-4 rounded-2xl font-bold text-lg shadow-lg hover:scale-[1.02] transition duration-300">

                    Update Password

                </button>

            </form>

            <!-- FOOTER -->
            <div class="mt-8 text-center text-sm text-gray-500">

                Secure HR Attendance Platform

            </div>

        </div>

    </div>

</div>

<script>

function togglePassword() {

    const password =
        document.getElementById('password');

    if (password.type === 'password') {

        password.type = 'text';

    } else {

        password.type = 'password';
    }
}

</script>

</body>
</html>