{% extends 'base.html' %}
{% block title %}{{ e.title if e else 'Nieuwe afspraak' }}{% endblock %}
{% block content %}
<div class="head">
  <div>
    <a class="label" href="{{ nxt or url_for('calendar_view', m=v.start_date[:7]) }}">← Agenda</a>
    <h1>{{ 'Afspraak bewerken' if e else 'Nieuwe afspraak' }}</h1>
  </div>
  {% if e and e.contact_id %}<div class="actions"><a class="btn btn-outline-secondary" href="{{ url_for('contact_view', cid=e.contact_id) }}">{{ e.contact_name }}</a></div>{% endif %}
</div>
<form method="post" class="card" style="max-width:860px"><div class="card-body">
  <input type="hidden" name="next" value="{{ nxt }}">
  <div class="row g-3">
    <div class="col-12"><label class="form-label" for="title">Titel *</label><input class="form-control" id="title" name="title" value="{{ v.title }}" required autofocus></div>
    <div class="col-12">
      <div class="form-check"><input class="form-check-input" type="checkbox" id="all_day" name="all_day" {{ 'checked' if v.all_day }}><label class="form-check-label" for="all_day">Hele dag</label></div>
    </div>
    <div class="col-7 col-md-4"><label class="form-label" for="start_date">Van</label><input class="form-control" type="date" id="start_date" name="start_date" value="{{ v.start_date }}" required></div>
    <div class="col-5 col-md-2 ev-time"><label class="form-label" for="start_time">Tijd</label><input class="form-control" type="time" id="start_time" name="start_time" value="{{ v.start_time }}" step="300"></div>
    <div class="col-7 col-md-4"><label class="form-label" for="end_date">Tot en met</label><input class="form-control" type="date" id="end_date" name="end_date" value="{{ v.end_date }}"></div>
    <div class="col-5 col-md-2 ev-time"><label class="form-label" for="end_time">Tijd</label><input class="form-control" type="time" id="end_time" name="end_time" value="{{ v.end_time }}" step="300"></div>
    <div class="col-md-6"><label class="form-label" for="user_id">Agenda van</label>
      <select class="form-select" id="user_id" name="user_id">
        {% for u in USERS %}<option value="{{ u.id }}" {{ 'selected' if v.user_id|string == u.id|string }}>{{ u.name }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-6"><label class="form-label" for="repeat">Herhalen</label>
      <select class="form-select" id="repeat" name="repeat">
        {% if v.repeat == 'keep' %}<option value="keep" selected>Zoals ingesteld in de agenda-app</option>{% endif %}
        {% for k, l in REPEATS %}<option value="{{ k }}" {{ 'selected' if v.repeat == k }}>{{ l }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-6"><label class="form-label" for="contact_id">Contact</label>
      <select class="form-select" id="contact_id" name="contact_id">
        <option value="">— Geen —</option>
        {% for c in contacts %}<option value="{{ c.id }}" {{ 'selected' if v.contact_id|string == c.id|string }}>{{ c.name }}{% if c.type == 'lead' %} (lead){% endif %}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-6"><label class="form-label" for="location">Locatie</label><input class="form-control" id="location" name="location" value="{{ v.location }}"></div>
    <div class="col-12"><label class="form-label" for="description">Notitie</label><textarea class="form-control" id="description" name="description" rows="4">{{ v.description }}</textarea></div>
  </div>
  {% if e and e.ics and 'VALARM' in e.ics %}<p class="hint">Deze afspraak heeft herinneringen uit een agenda-app; opslaan in de CRM haalt die weg.</p>{% endif %}
  <div class="actions">
    <button class="btn btn-primary">Opslaan</button>
    <a class="btn btn-outline-secondary" href="{{ nxt or url_for('calendar_view', m=v.start_date[:7]) }}">Annuleren</a>
    {% if e %}<button class="btn btn-outline-secondary ms-auto" form="delete-event" onclick="return confirm('Afspraak verwijderen?')">Verwijderen</button>{% endif %}
  </div>
</div></form>
{% if e %}<form id="delete-event" method="post" action="{{ url_for('calendar_delete', eid=e.id) }}"></form>{% endif %}
<script>
  (() => {
    const allDay = document.getElementById('all_day'), sd = document.getElementById('start_date'), ed = document.getElementById('end_date');
    const st = document.getElementById('start_time'), et = document.getElementById('end_time');
    const sync = () => document.querySelectorAll('.ev-time').forEach((el) => { el.hidden = allDay.checked; });
    allDay.addEventListener('change', sync);
    sync();
    // einddatum en -tijd schuiven mee met het begin
    let lastStart = sd.value;
    sd.addEventListener('change', () => {
      if (!ed.value || ed.value === lastStart || ed.value < sd.value) ed.value = sd.value;
      lastStart = sd.value;
    });
    let lastTime = st.value;
    st.addEventListener('change', () => {
      const toMin = (t) => { const [h, m] = t.split(':').map(Number); return h * 60 + m; };
      if (lastTime && et.value && st.value) {
        const end = Math.min(toMin(et.value) + toMin(st.value) - toMin(lastTime), 23 * 60 + 55);
        if (end > toMin(st.value)) et.value = `${String(Math.floor(end / 60)).padStart(2, '0')}:${String(end % 60).padStart(2, '0')}`;
      }
      lastTime = st.value;
    });
  })();
</script>
{% endblock %}