{% extends 'base.html' %}
{% block title %}Horaires{% endblock %}
{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
  <h1><i class="bi bi-clock me-2 text-secondary"></i>Horaires d'impression</h1>
  <a href="{{ url_for('planning') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Planning
  </a>
</div>

<div class="row">
  <div class="col-lg-9">
    <form method="POST">
      <div class="card">
        <div class="card-header py-3">Planning hebdomadaire par défaut</div>
        <div class="card-body p-0">
          <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th style="width:120px">Jour</th>
                <th style="width:150px">Mode</th>
                <th>Fenêtre TT (début → fin)</th>
                <th>Créneaux sur site</th>
              </tr>
            </thead>
            <tbody>
              {% set day_names = ['Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi','Dimanche'] %}
              {% for s in schedule %}
              <tr>
                <td class="fw-semibold">{{ day_names[s.day_of_week] }}</td>
                <td>
                  <select name="mode_{{ s.day_of_week }}" class="form-select form-select-sm mode-select"
                          data-dow="{{ s.day_of_week }}" onchange="toggleRow(this)">
                    <option value="tt"     {% if s.mode=='tt' %}selected{% endif %}>Télétravail</option>
                    <option value="onsite" {% if s.mode=='onsite' %}selected{% endif %}>Sur site</option>
                    <option value="off"    {% if s.mode=='off' %}selected{% endif %}>Off</option>
                  </select>
                </td>
                <td class="tt-fields-{{ s.day_of_week }}" {% if s.mode != 'tt' %}style="opacity:.3;pointer-events:none"{% endif %}>
                  <div class="d-flex gap-2 align-items-center">
                    <input type="time" name="tt_start_{{ s.day_of_week }}" class="form-control form-control-sm" style="width:110px"
                           value="{{ s.tt_window_start }}">
                    <span class="text-muted">→</span>
                    <input type="time" name="tt_end_{{ s.day_of_week }}" class="form-control form-control-sm" style="width:110px"
                           value="{{ s.tt_window_end }}">
                  </div>
                </td>
                <td class="onsite-fields-{{ s.day_of_week }}" {% if s.mode != 'onsite' %}style="opacity:.3;pointer-events:none"{% endif %}>
                  <div class="d-flex gap-2 align-items-center">
                    <input type="time" name="onsite_slot1_{{ s.day_of_week }}" class="form-control form-control-sm" style="width:110px"
                           value="{{ s.onsite_slot_1 }}">
                    <span class="text-muted">+</span>
                    <input type="time" name="onsite_slot2_{{ s.day_of_week }}" class="form-control form-control-sm" style="width:110px"
                           value="{{ s.onsite_slot_2 }}">
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="mt-3">
        <button type="submit" class="btn px-4 fw-bold" style="background:#ff6b35;color:#fff">
          <i class="bi bi-save me-2"></i>Enregistrer
        </button>
      </div>
    </form>
  </div>
  <div class="col-lg-3">
    <div class="card">
      <div class="card-header py-3">Légende</div>
      <div class="card-body small">
        <p><span class="badge bg-primary">Télétravail</span><br>Fenêtre continue — les impressions se lancent en séquence de l'heure de début à l'heure de fin.</p>
        <p><span class="badge bg-warning text-dark">Sur site</span><br>2 créneaux fixes — matin (avant de partir) et soir (en rentrant).</p>
        <p><span class="badge bg-secondary">Off</span><br>Aucune impression ce jour-là par défaut.</p>
        <hr>
        <p class="text-muted">Ces horaires sont remplacés jour par jour via les <a href="{{ url_for('calendar_blocks') }}">Indisponibilités</a>.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function toggleRow(sel) {
  const dow  = sel.dataset.dow;
  const mode = sel.value;
  const ttEl     = document.querySelector('.tt-fields-'     + dow);
  const onsiteEl = document.querySelector('.onsite-fields-' + dow);
  ttEl.style.opacity     = mode === 'tt'     ? '1' : '0.3';
  ttEl.style.pointerEvents = mode === 'tt'   ? ''  : 'none';
  onsiteEl.style.opacity = mode === 'onsite' ? '1' : '0.3';
  onsiteEl.style.pointerEvents = mode === 'onsite' ? '' : 'none';
}
</script>
{% endblock %}