{% extends 'base.html' %}
{% block title %}Indisponibilités{% endblock %}
{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
  <h1><i class="bi bi-calendar-x me-2 text-secondary"></i>Indisponibilités</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 g-4">
  <div class="col-md-5">
    <div class="card">
      <div class="card-header py-3">Ajouter une exception</div>
      <div class="card-body">
        <form method="POST">
          <div class="row g-2 mb-3">
            <div class="col">
              <label class="form-label fw-semibold">Date de début</label>
              <input type="date" name="date_start" id="dateStart" class="form-control" required>
            </div>
            <div class="col">
              <label class="form-label fw-semibold">Date de fin <span class="text-muted fw-normal small">(optionnel)</span></label>
              <input type="date" name="date_end" id="dateEnd" class="form-control">
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Type</label>
            <select name="type" class="form-select">
              <option value="off">Off / Jour chômé</option>
              <option value="tt">Télétravail (remplace onsite)</option>
              <option value="onsite">Sur site (remplace TT)</option>
              <option value="maintenance">Maintenance machine</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Imprimante concernée</label>
            <select name="printer_id" class="form-select">
              <option value="">Toutes les imprimantes</option>
              {% for p in printers %}
              <option value="{{ p.id }}">{{ p.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Note</label>
            <input type="text" name="notes" class="form-control" placeholder="ex: Vacances août, maintenance buse…">
          </div>
          <button type="submit" class="btn fw-bold" style="background:#ff6b35;color:#fff">
            <i class="bi bi-plus-lg me-1"></i>Ajouter
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-7">
    <div class="card">
      <div class="card-header py-3">Exceptions récentes / à venir</div>
      <div class="card-body p-0">
        {% if blocks %}
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr><th>Période</th><th>Type</th><th>Machine</th><th>Note</th><th></th></tr>
          </thead>
          <tbody>
            {% for b in blocks %}
            <tr>
              <td class="fw-semibold" style="white-space:nowrap">
                {{ b.date }}
                {% if b.date_end and b.date_end != b.date %}
                  <span class="text-muted fw-normal">→</span> {{ b.date_end }}
                {% endif %}
              </td>
              <td>
                {% if b.type == 'off' %}<span class="badge bg-danger">Off</span>
                {% elif b.type == 'tt' %}<span class="badge bg-primary">TT</span>
                {% elif b.type == 'onsite' %}<span class="badge bg-warning text-dark">Sur site</span>
                {% else %}<span class="badge bg-secondary">{{ b.type }}</span>{% endif %}
              </td>
              <td class="text-muted small">{{ b.printer_name or 'Toutes' }}</td>
              <td class="text-muted small">{{ b.notes or '—' }}</td>
              <td>
                <form method="POST" action="{{ url_for('delete_calendar_block', id=b.id) }}">
                  <button class="btn btn-sm btn-outline-danger py-0"><i class="bi bi-trash"></i></button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="text-center text-muted py-5">
          <i class="bi bi-calendar-check fs-2"></i>
          <p class="mt-2 small">Aucune exception définie.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const dateStart = document.getElementById('dateStart');
const dateEnd   = document.getElementById('dateEnd');
dateStart.addEventListener('change', () => {
  dateEnd.min = dateStart.value;
  if (dateEnd.value && dateEnd.value < dateStart.value) dateEnd.value = dateStart.value;
});
</script>
{% endblock %}