{% extends "base.html" %}
{% block title %}Mes horaires — GMAO Collège{% endblock %}

{% block content %}
<div class="py-2 py-md-3" style="max-width:700px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0 h5"><i class="bi bi-clock"></i> Mes horaires</h2>
    <a href="{{ url_for('planning.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Planning</a>
  </div>

  <p class="text-muted small mb-3">Configure tes jours et horaires de travail. Le planning tiendra compte de tes disponibilités pour les interventions préventives.</p>

  <form method="POST">
    {{ csrf_token|safe if csrf_token else '' }}

    {% for day_num in range(1, 8) %}
    {% set ws = schedules.get(day_num) %}
    <div class="card border-0 shadow-sm mb-2" id="day-card-{{ day_num }}">
      <div class="card-body py-2 px-3">
        <!-- Ligne jour principal -->
        <div class="d-flex justify-content-between align-items-center">
          <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" name="working_{{ day_num }}" id="working_{{ day_num }}"
                   {% if not ws or ws.is_working %}checked{% endif %}
                   onchange="toggleDay({{ day_num }})">
            <label class="form-check-label fw-bold" for="working_{{ day_num }}">{{ weekdays[day_num] }}</label>
          </div>
        </div>

        <!-- Détail horaires (caché si jour off) -->
        <div id="day-detail-{{ day_num }}" class="{% if ws and not ws.is_working %}d-none{% endif %}">
          <div class="row g-2 mt-1 align-items-center">
            <!-- Matin -->
            <div class="col-6">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="am_working_{{ day_num }}" id="am_{{ day_num }}"
                       {% if not ws or ws.am_working %}checked{% endif %}
                       onchange="toggleHalf('am',{{ day_num }})">
                <label class="form-check-label small" for="am_{{ day_num }}">Matin</label>
              </div>
              <div id="am-times-{{ day_num }}" class="d-flex gap-1 mt-1 {% if ws and not ws.am_working %}d-none{% endif %}">
                <input type="time" name="am_start_{{ day_num }}" value="{{ ws.am_start if ws and ws.am_start else '08:00' }}" class="form-control form-control-sm" style="max-width:90px;">
                <span class="align-self-center small">→</span>
                <input type="time" name="am_end_{{ day_num }}" value="{{ ws.am_end if ws and ws.am_end else '12:00' }}" class="form-control form-control-sm" style="max-width:90px;">
              </div>
            </div>
            <!-- Après-midi -->
            <div class="col-6">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="pm_working_{{ day_num }}" id="pm_{{ day_num }}"
                       {% if not ws or ws.pm_working %}checked{% endif %}
                       onchange="toggleHalf('pm',{{ day_num }})">
                <label class="form-check-label small" for="pm_{{ day_num }}">Après-midi</label>
              </div>
              <div id="pm-times-{{ day_num }}" class="d-flex gap-1 mt-1 {% if ws and not ws.pm_working %}d-none{% endif %}">
                <input type="time" name="pm_start_{{ day_num }}" value="{{ ws.pm_start if ws and ws.pm_start else '13:00' }}" class="form-control form-control-sm" style="max-width:90px;">
                <span class="align-self-center small">→</span>
                <input type="time" name="pm_end_{{ day_num }}" value="{{ ws.pm_end if ws and ws.pm_end else '17:00' }}" class="form-control form-control-sm" style="max-width:90px;">
              </div>
            </div>
          </div>
        </div>

        <!-- Jour off -->
        <div id="day-off-{{ day_num }}" class="{% if not ws or ws.is_working %}d-none{% endif %}">
          <small class="text-muted">Non travaillé</small>
        </div>
      </div>
    </div>
    {% endfor %}

    <button type="submit" class="btn btn-primary mt-2">
      <i class="bi bi-check-lg"></i> Enregistrer mes horaires
    </button>
  </form>
</div>

{% block scripts %}
<script>
function toggleDay(n) {
  const checked = document.getElementById('working_'+n).checked;
  document.getElementById('day-detail-'+n).classList.toggle('d-none', !checked);
  document.getElementById('day-off-'+n).classList.toggle('d-none', checked);
}
function toggleHalf(half, n) {
  const checked = document.getElementById(half+'_'+n).checked;
  document.getElementById(half+'-times-'+n).classList.toggle('d-none', !checked);
}
</script>
{% endblock %}
{% endblock %}