{% extends "base.html" %}

{% block title %}
{% if mode == "edit" %}{{ t(key="edit-booking", lang=lang) }}{% else %}{{ t(key="add-booking", lang=lang) }}{% endif %}
{% endblock title %}

{% block content %}
<div class="mx-auto max-w-md">
  <div class="mb-4 flex items-center justify-between">
    <h1 class="text-2xl font-bold">
      {% if mode == "edit" %}{{ t(key="edit-booking", lang=lang) }}{% else %}{{ t(key="add-booking", lang=lang) }}{% endif %}
    </h1>
    <a href="/admin?court={{ court_id }}&week={{ date }}" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
  </div>

  <div class="card border border-base-300 bg-base-100 shadow-sm">
    <div class="card-body">
      <form method="post" action="{{ action }}" class="space-y-2">
        <input type="hidden" name="court_id" value="{{ court_id }}">
        <div class="text-sm opacity-70">
          {{ t(key="court-label", lang=lang) }}: <strong>{{ court_name }}</strong>
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="date", lang=lang) }}</span></label>
          <input type="date" name="date" value="{{ date }}" required class="input input-bordered w-full">
        </div>
        {% if mode == "new" %}
        <div class="grid grid-cols-2 gap-2">
          <div class="form-control">
            <label class="label"><span class="label-text">{{ t(key="hour-from", lang=lang) }}</span></label>
            <select name="hour_start" id="hour_start" class="select select-bordered w-full">
              {% for h in hours %}
              <option value="{{ h.v }}" {% if h.v == hour_start %}selected{% endif %}>{{ h.label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text">{{ t(key="hour-to", lang=lang) }}</span></label>
            <select name="hour_end" id="hour_end" class="select select-bordered w-full">
              {% for h in hours_end %}
              <option value="{{ h.v }}" {% if h.v == hour_end %}selected{% endif %}>{{ h.label }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="repeat-weeks", lang=lang) }}</span></label>
          <input type="number" name="repeat_weeks" value="{{ repeat_weeks }}" min="1" max="52" required
            class="input input-bordered w-full">
          <label class="label">
            <span class="label-text-alt opacity-60">{{ t(key="repeat-hint", lang=lang) }}</span>
          </label>
        </div>
        {% else %}
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="hour", lang=lang) }}</span></label>
          <select name="hour" class="select select-bordered w-full">
            {% for h in hours %}
            <option value="{{ h.v }}" {% if h.v == hour %}selected{% endif %}>{{ h.label }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="booking-color", lang=lang) }}</span></label>
          <input type="color" name="color" value="{{ color }}"
            class="h-10 w-20 cursor-pointer rounded border border-base-300">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="booking-name", lang=lang) }}</span></label>
          <input name="name" value="{{ name }}" required class="input input-bordered w-full">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="booking-title", lang=lang) }}</span></label>
          <input name="title" value="{{ title }}" class="input input-bordered w-full">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="booking-contact", lang=lang) }}</span></label>
          <input name="contact" value="{{ contact }}" class="input input-bordered w-full">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="booking-note", lang=lang) }}</span></label>
          <textarea name="note" rows="3" class="textarea textarea-bordered w-full">{{ note }}</textarea>
        </div>
        <div class="flex items-center gap-2 pt-2">
          <button class="btn btn-neutral">{{ t(key="save", lang=lang) }}</button>
          <a href="/admin?court={{ court_id }}&week={{ date }}" class="btn btn-ghost">{{ t(key="cancel", lang=lang) }}</a>
        </div>
      </form>
    </div>
  </div>

  {% if mode == "edit" %}
  <form method="post" action="/admin/booking/{{ booking_id }}/delete" class="mt-3"
    onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang) }}');">
    <button class="btn btn-outline btn-error btn-sm">{{ t(key="delete", lang=lang) }}</button>
  </form>
  {% endif %}
</div>
{% endblock content %}

{% block js %}
{% if mode == "new" %}
<script>
  // Keep the "until" time after the "from" time as the start hour changes.
  (function () {
    var s = document.getElementById('hour_start');
    var e = document.getElementById('hour_end');
    if (!s || !e) return;
    s.addEventListener('change', function () {
      if (parseInt(e.value, 10) <= parseInt(s.value, 10)) {
        e.value = String(parseInt(s.value, 10) + 1);
      }
    });
  })();
</script>
{% endif %}
{% endblock js %}