{% extends "base.html" %}
{% block title %}Predict CGPA{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto bg-white p-6 rounded shadow">
  <h1 class="text-2xl font-bold mb-4">Student CGPA Predictor</h1>

  {% if error %}
    <div class="mb-4 p-3 bg-red-100 text-red-700 rounded">{{ error }}</div>
  {% endif %}

  <form id="predictForm" method="post" class="space-y-4">
    <!-- Age -->
    <div>
        <label class="block font-medium">Age (18–29)</label>
        <input name="Age" type="number" min="18" max="29" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Gender -->
      <div>
        <span class="block font-medium">Gender</span>
        <label><input type="radio" name="Gender" value="Female" required/> Female</label>
        <label class="ml-4"><input type="radio" name="Gender" value="Male"/> Male</label>
        <label class="ml-4"><input type="radio" name="Gender" value="Other"/> Other</label>
      </div>

      <!-- Hours of Study -->
      <div>
        <label class="block font-medium">Study Hours/Day (0–24)</label>
        <input name="HoursOfStudyPerDay" type="number" step="0.1" min="0" max="24" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Attendance -->
      <div>
        <label class="block font-medium">Attendance Rate (%) (0–100)</label>
        <input name="SchoolAttendanceRate" type="number" step="0.1" min="0" max="100" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Tuition Access -->
      <div>
        <label class="block font-medium">Tuition Access</label>
        <select name="TuitionAccess" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Yes</option>
          <option>No</option>
        </select>
      </div>

      <!-- Previous Scores -->
      <div>
        <label class="block font-medium">Average Previous Score (0–100)</label>
        <input name="AveragePreviousScores" type="number" step="0.1" min="0" max="100" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Clubs -->
      <div>
        <label class="block font-medium">Participates in Clubs</label>
        <select name="ParticipatesInClubs" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Yes</option>
          <option>No</option>
        </select>
      </div>

      <!-- Sleep Hours -->
      <div>
        <label class="block font-medium">Sleep Hours/Night (0–24)</label>
        <input name="HoursOfSleep" type="number" step="0.1" min="0" max="24" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Breakfast -->
      <div>
        <label class="block font-medium">Eat Breakfast Daily?</label>
        <select name="BreakfastDaily" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Yes</option>
          <option>No</option>
        </select>
      </div>

      <!-- Screen Time -->
      <div>
        <label class="block font-medium">Leisure Screen Time (0–24h)</label>
        <input name="ScreenTimeHours" type="number" step="0.1" min="0" max="24" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Physical Activity -->
      <div>
        <label class="block font-medium">Physical Activity Hours (0–24)</label>
        <input name="PhysicalActivityHours" type="number" step="0.1" min="0" max="24" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Plays Sport -->
      <div>
        <label class="block font-medium">Plays Sport</label>
        <select name="PlaysSport" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Yes</option>
          <option>No</option>
        </select>
      </div>

      <!-- Mental Health -->
      <div>
        <label class="block font-medium">Mental Health Score (0–10)</label>
        <input name="MentalHealthScore" type="number" min="0" max="10" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Study Environment -->
      <div>
        <label class="block font-medium">Study Environment Rating (1–5)</label>
        <input name="StudyEnvironmentRating" type="number" min="1" max="5" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Friend Support -->
      <div>
        <label class="block font-medium">Friend Support Score (0–10)</label>
        <input name="FriendSupportScore" type="number" min="0" max="10" required
               class="w-full mt-1 p-2 border rounded"/>
      </div>

      <!-- Parental Education -->
      <div>
        <label class="block font-medium">Parental Education Level</label>
        <select name="ParentalEducationLevel" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>High school</option>
          <option>Graduate</option>
          <option>Postgrad</option>
        </select>
      </div>

      <!-- Household Income -->
      <div>
        <label class="block font-medium">Household Income Level</label>
        <select name="HouseholdIncomeLevel" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Low</option>
          <option>Medium</option>
          <option>High</option>
        </select>
      </div>

      <!-- Part‑time Work -->
      <div>
        <label class="block font-medium">Part‑Time Work</label>
        <select name="PartTimeWork" required class="w-full mt-1 p-2 border rounded">
          <option value="">Select…</option>
          <option>Yes</option>
          <option>No</option>
        </select>
      </div>

      <!-- Cross‑field Hours Warning -->
      <p id="hoursWarning" class="text-red-600 hidden">Total hours > 24!</p>

      <button type="submit"
              class="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700">
        Predict CGPA
      </button>
    
  </form>
</div>
<script src="/static/js/hours_check.js"></script>
{% endblock %}