<!DOCTYPE html>
<html>
<head>
    <title>Grade Calculation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(to right, #2c3e50, #e74c3c); /* เปลี่ยนเป็นโทนสีดำแดง */
            animation: backgroundAnimation 10s infinite alternate;
        }

        /* เอฟเฟกต์การเปลี่ยนสีพื้นหลัง */
        @keyframes backgroundAnimation {
            0% { background: #2c3e50; }
            100% { background: #e74c3c; }
        }

        .container {
            width: 400px;
            padding: 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #c0392b, #e74c3c); /* โทนสีแดง */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            text-align: center;
            color: #fff; /* เปลี่ยนข้อความให้เป็นสีขาว */
            transition: transform 0.3s ease;
        }

        .container:hover {
            transform: translateY(-10px); /* ยกตัวขึ้นเล็กน้อย */
        }

        .container h1 {
            color: #ffffff;
            font-size: 24px;
            margin-bottom: 20px;
            background-color: #e74c3c; /* สีแดงเข้ม */
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .container label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
            color: #fff; /* เปลี่ยนข้อความ label เป็นสีขาว */
        }

        .container input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 16px;
            box-sizing: border-box;
            outline: none;
            transition: box-shadow 0.3s ease;
        }

        .container input[type="number"]:focus {
            box-shadow: 0 0 5px 3px #c0392b; /* ใช้สีแดงเข้มเมื่อเลือกช่อง */
        }

        .container input[type="submit"],
        .container button {
            width: 48%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .container input[type="submit"] {
            background: linear-gradient(135deg, #c0392b, #e74c3c); /* สีแดง */
            color: #fff;
        }

        .container input[type="submit"]:hover {
            background: linear-gradient(135deg, #e74c3c, #c0392b); /* สีแดงเข้มเมื่อ hover */
            transform: translateY(-3px);
        }

        .container button {
            background: linear-gradient(135deg, #333, #444); /* ปุ่มสีดำ */
            color: #fff;
        }

        .container button:hover {
            background: linear-gradient(135deg, #444, #333); /* เปลี่ยนเป็นโทนดำเมื่อ hover */
            transform: translateY(-3px);
        }

        .result {
            margin-top: 20px;
            text-align: left;
            color: #333;
            font-size: 16px;
            padding: 20px;
            border-radius: 12px;
            background-color: #f5b7b1; /* เปลี่ยนสีพื้นหลังผลลัพธ์เป็นสีอ่อนแดง */
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* เอฟเฟกต์การแสดงผลเมื่อแสดงผลลัพธ์ */
        .result.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .result h2 {
            color: #c0392b; /* สีแดงเข้ม */
            font-size: 20px;
            margin-bottom: 10px;
        }

        .result p {
            margin: 5px 0;
            font-weight: bold;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        function resetResult() {
            document.getElementById("result").classList.remove("show");
            document.querySelector("form").reset(); // รีเซ็ตฟอร์ม
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>เกณฑ์คะแนนการตัดเกรดแบบอิงเกณฑ์</h1>
        <form method="POST">
            <label>จิตพิสัย (คะแนนเต็ม 20): </label>
            <input type="number" name="score_behavior" max="20" required>

            <label>แบบทดสอบ (คะแนนเต็ม 30): </label>
            <input type="number" name="score_test" max="30" required>

            <label>งาน (คะแนนเต็ม 20): </label>
            <input type="number" name="score_work" max="20" required>

            <label>สอบปลายภาค (คะแนนเต็ม 30): </label>
            <input type="number" name="score_final" max="30" required>

            <div class="button-group">
                <input type="submit" name="calculate" value="ประมวลผลการเรียน">
                <button type="button" onclick="resetResult()">รีเซ็ต</button>
            </div>
        </form>

        <?php if (isset($_POST['calculate'])): ?>
            <style>
                .result.show { display: block; } /* แสดงผลลัพธ์เมื่อกดปุ่ม Calculate Grade */
            </style>
            <div class="result show" id="result">
                <?php
                    // รับค่าคะแนนจากฟอร์ม
                    $score_behavior = $_POST['score_behavior'];
                    $score_test = $_POST['score_test'];
                    $score_work = $_POST['score_work'];
                    $score_final = $_POST['score_final'];

                    // คำนวณคะแนนรวม
                    $total_score = $score_behavior + $score_test + $score_work + $score_final;

                    // กำหนดเกณฑ์เกรด
                    if ($total_score >= 80) {
                        $grade = "A";
                    } elseif ($total_score >= 75) {
                        $grade = "B+";
                    } elseif ($total_score >= 70) {
                        $grade = "B";
                    } elseif ($total_score >= 65) {
                        $grade = "C+";
                    } elseif ($total_score >= 60) {
                        $grade = "C";
                    } elseif ($total_score >= 55) {
                        $grade = "D+";
                    } elseif ($total_score >= 50) {
                        $grade = "D";
                    } else {
                        $grade = "F";
                    }
                ?>
                <h2>ผลการประมวลผล</h2>
                <p>จิตพิสัย: <?php echo $score_behavior; ?> คะแนน</p>
                <p>แบบทดสอบ: <?php echo $score_test; ?> คะแนน</p>
                <p>งาน: <?php echo $score_work; ?> คะแนน</p>
                <p>สอบปลายภาค: <?php echo $score_final; ?> คะแนน</p>
                <p><strong>รวมคะแนน: <?php echo $total_score; ?> คะแนน</strong></p>
                <p><strong>เกรด: <?php echo $grade; ?></strong></p>
            </div>
        <?php endif; ?>
    </div>
</body>
</html>
