Untitled

<div id="subject-grades-modal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center hidden">
        <div class="bg-white rounded-lg p-6 w-2/5 h-4/6">
            <div class="mb-10 flex flex-row items-center">
                <i class="text-3xl fas fa-chalkboard-teacher mx-5 text-blue-500"></i>
                <div class="flex flex-col mt-2">
                    <h2 id="subjectTitle_Modal" class="text-2xl font-bold"></h2>
                    <h2 class="mt-1 text-gray-800">
                        Congratulations on completing this subject! Regardless of your grade, you should be proud of the hard work and effort you put into it. Remember, success is not just about the grade you receive, but about the knowledge and skills you gain along the way. Keep up the good work!
                    </h2>
                </div>
            </div>
            <form method="post">
                <div class="mb-4">
                    <label class="block text-gray-700 font-medium mb-2" for="class-name">Teacher</label>
                    <input required class="border border-gray-400 p-2 w-full rounded-md" type="text" name="teacher-identifier" id="subjectTeacher_Modal" readonly>
                </div>
                <div class="flex flex-row">
                    <div class="mb-4 w-1/2 mr-4">
                        <label class="block text-gray-700 font-medium mb-2" for="class-name">Grade</label>
                        <?php if ($grades !== false) : ?>
                            <input required class="border border-gray-400 p-2 w-full rounded-md" type="text" name="teacher-identifier" id="subjectGrade_Modal" value="<?= $grades[0]['grade_value'] ?>" readonly>
                        <?php else : ?>
                            <input required class="border border-gray-400 p-2 w-full rounded-md" type="text" name="teacher-identifier" id="subjectGrade_Modal" value="N/A" readonly>
                        <?php endif; ?>
                    </div>
                    <div class="mb-4 w-1/2">
                        <label class="block text-gray-700 font-medium mb-2" for="class-name">Percentage</label>
                        <input required class="border border-gray-400 p-2 w-full rounded-md" type="text" name="teacher-identifier" id="subjectPercentage_Modal" readonly>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-medium mb-2" for="class-name">Graded At</label>
                    <input required class="border border-gray-400 p-2 w-full rounded-md" type="text" name="teacher-identifier" id="subject-gradedAt_Modal" readonly>
                </div>
                <div class="flex justify-center mt-20">
                    <button type="button" onclick="closeSubjectModal()" class="w-full bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-400 transition duration-300 ease-in-out">Close</button>
                </div>
            </form>
        </div>
    </div>