{% extends 'base.html' %}
{% block title %}İşi Düzenle · Odak Planım{% endblock %}
{% block content %}
<section class="mx-auto max-w-2xl">
  <a href="{{ url_for('tasks') }}" class="text-sm font-bold text-teal"><i class="fa-solid fa-arrow-left mr-2"></i> İşlere dön</a>
  <div class="mt-5 rounded-2xl border border-white bg-white/85 p-6 shadow-card sm:p-8">
    <p class="text-sm font-bold uppercase tracking-[.18em] text-teal">İş akışı</p>
    <h1 class="display-font mt-2 text-4xl font-bold">İşi düzenle</h1>
    <p class="mt-3 text-sm text-slate-500">Ödevler, kontrol tarihinden önce tamamlanacak şekilde programa öncelikli olarak yerleştirilir.</p>
    <form method="post" class="mt-7 space-y-5">
      <label class="block text-sm font-bold">Kitap
        <select name="book_id" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500">
          {% for book in books %}<option value="{{ book.id }}" {{ 'selected' if book.id == task.book_id }}>{{ book.name }}</option>{% endfor %}
        </select>
      </label>
      <div class="grid gap-5 sm:grid-cols-2">
        <label class="block text-sm font-bold">İş türü
          <select id="task-type" name="task_type" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500">
            <option {{ 'selected' if task.task_type == 'Görev' }}>Görev</option><option {{ 'selected' if task.task_type == 'Ödev' }}>Ödev</option>
          </select>
        </label>
        <label class="block text-sm font-bold">Önem derecesi <span id="priority-value" class="float-right text-teal">{{ task.priority }}</span>
          <input id="priority" type="range" name="priority" value="{{ task.priority }}" min="0" max="5" class="mt-4 w-full accent-teal">
        </label>
      </div>
      <label id="control-date-field" class="rounded-xl border border-rose-100 bg-rose-50/70 p-3 text-sm font-bold text-rose-700">Kontrol tarihi
        <input id="control-date" type="date" name="control_date" value="{{ task.control_date.isoformat() if task.control_date else '' }}" min="{{ minimum_control_date }}" class="mt-2 w-full rounded-xl border border-rose-200 bg-white px-4 py-3 font-normal text-slate-700 outline-none focus:border-rose-400">
        <span class="mt-2 block text-xs font-normal leading-5 text-rose-600">Bu tarihte kontrol edilecek ödev, tarihten önce bitmiş olmalıdır.</span>
      </label>
      <label class="block text-sm font-bold">Açıklama <span class="font-normal text-slate-400">(isteğe bağlı)</span>
        <textarea name="description" maxlength="250" rows="2" class="mt-2 w-full resize-y rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal leading-6 outline-none focus:border-teal-500">{{ task.description or '' }}</textarea>
      </label>
      <div class="grid gap-5 sm:grid-cols-2">
        <label class="block text-sm font-bold">Başlangıç sayfası
          <input type="number" min="1" name="start_page" value="{{ task.start_page }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500">
        </label>
        <label class="block text-sm font-bold">Bitiş sayfası
          <input type="number" min="1" name="end_page" value="{{ task.end_page }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500">
        </label>
      </div>
      <div class="flex gap-3"><a href="{{ url_for('tasks') }}" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-bold text-slate-600">Vazgeç</a><button class="rounded-xl bg-teal px-5 py-3 text-sm font-bold text-white">Değişiklikleri kaydet</button></div>
    </form>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>
const priority=document.getElementById('priority');
const priorityValue=document.getElementById('priority-value');
const taskType=document.getElementById('task-type');
const controlDateField=document.getElementById('control-date-field');
const controlDate=document.getElementById('control-date');
priority.addEventListener('input',()=>priorityValue.textContent=priority.value);
function toggleControlDate(){
  const isAssignment=taskType.value==='Ödev';
  controlDateField.classList.toggle('hidden',!isAssignment);
  controlDate.required=isAssignment;
  if(!isAssignment) controlDate.value='';
}
taskType.addEventListener('change',toggleControlDate);toggleControlDate();
</script>
{% endblock %}