{% extends "base.html" %}
{% block title %}School Setup{% endblock %}
{% block page_title %}School Setup{% endblock %}
{% set active = "setup" %}

{% block content %}
<div class="two-col-layout">

  <!-- School Info -->
  <div class="card">
    <div class="card-header">
      <h3>School Information</h3>
    </div>
    <div class="card-body">
      <form hx-post="/setup/school" hx-target="#school-toast" hx-swap="innerHTML">
        <div class="form-group">
          <label class="form-label">School Name</label>
          <input type="text" name="name" class="form-input" value="{{ school.name }}" required>
        </div>
        <div class="form-group">
          <label class="form-label">Address</label>
          <textarea name="address" class="form-input" rows="2">{{ school.address or '' }}</textarea>
        </div>
        <div class="form-group">
          <label class="form-label">Board</label>
          <select name="board" class="form-select">
            <option {% if school.board=='CBSE' %}selected{% endif %}>CBSE</option>
            <option {% if school.board=='Matric' %}selected{% endif %}>Matric</option>
            <option {% if school.board=='State' %}selected{% endif %}>State</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary w-full">Save School Info</button>
      </form>
      <div id="school-toast"></div>
    </div>
  </div>

  <!-- Timetable Config -->
  <div class="card">
    <div class="card-header">
      <h3>Timetable Configuration</h3>
    </div>
    <div class="card-body">
      <form hx-post="/setup/config" hx-target="#config-toast" hx-swap="innerHTML">
        <div class="form-group">
          <label class="form-label">Academic Year</label>
          <input type="text" name="academic_year" class="form-input" value="{{ cfg.academic_year if cfg else '2025-26' }}">
        </div>

        <div class="form-group">
          <label class="form-label">Working Days</label>
          <div class="day-checkboxes">
            {% for day in ['Mon','Tue','Wed','Thu','Fri','Sat'] %}
            {% set checked = cfg and day in cfg.working_days %}
            <label class="day-check {% if checked %}checked{% endif %}">
              <input type="checkbox" name="working_days_{{ day }}" value="{{ day }}"
                {% if checked %}checked{% endif %}
                onchange="updateWorkingDays()">
              {{ day }}
            </label>
            {% endfor %}
          </div>
          <input type="hidden" name="working_days" id="working_days_hidden"
            value="{{ cfg.working_days if cfg else 'Mon,Tue,Wed,Thu,Fri,Sat' }}">
        </div>

        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Periods / Day</label>
            <input type="number" name="periods_per_day" class="form-input" min="4" max="12"
              value="{{ cfg.periods_per_day if cfg else 8 }}">
          </div>
          <div class="form-group">
            <label class="form-label">Period Duration (min)</label>
            <input type="number" name="period_duration" class="form-input" min="30" max="90"
              value="{{ cfg.period_duration if cfg else 45 }}">
          </div>
        </div>

        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Break After Period #</label>
            <input type="text" name="break_after" class="form-input" placeholder="e.g. 4"
              value="{{ cfg.break_after if cfg else '4' }}">
          </div>
          <div class="form-group">
            <label class="form-label">Break Duration (min)</label>
            <input type="number" name="break_duration" class="form-input"
              value="{{ cfg.break_duration if cfg else 30 }}">
          </div>
        </div>

        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Lab Days</label>
            <input type="text" name="lab_days" class="form-input" placeholder="Wed,Thu"
              value="{{ cfg.lab_days if cfg else 'Wed,Thu' }}">
            <div class="form-hint">Comma-separated day abbreviations</div>
          </div>
          <div class="form-group">
            <label class="form-label">PT/Games Days</label>
            <input type="text" name="pt_days" class="form-input" placeholder="Sat"
              value="{{ cfg.pt_days if cfg else 'Sat' }}">
          </div>
        </div>

        <button type="submit" class="btn btn-primary w-full">Save Configuration</button>
      </form>
      <div id="config-toast"></div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
function updateWorkingDays() {
  const days = ['Mon','Tue','Wed','Thu','Fri','Sat'];
  const selected = days.filter(d => document.querySelector(`input[value="${d}"]`).checked);
  document.getElementById('working_days_hidden').value = selected.join(',');
  document.querySelectorAll('.day-check').forEach(label => {
    const cb = label.querySelector('input');
    label.classList.toggle('checked', cb.checked);
  });
}
</script>
{% endblock %}