{% extends 'base.html' %}
{% block title %}Görevler & Ödevler · Odak Planım{% endblock %}
{% block head %}
{{ super() }}
<style>
  /* Keep task details in their own flexible column instead of allowing them
     to collapse beside the icon on wide screens. */
  .task-card-details {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    width: 100%;
  }

  .task-card-details__content { min-width: 0; }
</style>
{% endblock %}
{% block content %}
<section class="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
  <div>
    <p class="text-sm font-bold uppercase tracking-[.18em] text-teal">İş akışı</p>
    <h1 class="display-font mt-2 text-4xl font-bold">Görevler ve ödevler.</h1>
    <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-500">Sayfa aralıklarını belirle; ödevler çakışan görev sayfalarını otomatik olarak devralır ve kontrol tarihinden önce planlanır.</p>
  </div>
  <a href="{{ url_for('progress') }}" class="inline-flex items-center justify-center gap-2 rounded-xl border border-teal-200 bg-teal-50 px-4 py-3 text-sm font-bold text-teal transition hover:bg-teal-100"><i class="fa-solid fa-chart-line"></i> İlerleme gir</a>
</section>

{% if books %}
<section class="grid min-w-0 gap-7">
  <div class="min-w-0 rounded-2xl border border-white bg-white/85 p-6 shadow-card">
    <h2 class="font-bold">Yeni iş tanımla</h2>
    <p class="mt-1 text-xs leading-5 text-slate-500">Ödev eklendiğinde çakışan görev sayfaları ayrılır. Kontrol tarihi, ödevin bitmiş olması gereken gündür.</p>
    <form method="post" class="mt-5 space-y-4">
      <label class="block text-sm font-bold">Kitap
        <select name="book_id" 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">
          {% for book in books %}<option value="{{ book.id }}">{{ book.name }}</option>{% endfor %}
        </select>
      </label>
      <div class="grid gap-4 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>Görev</option><option>Ödev</option>
          </select>
        </label>
        <label class="block text-sm font-bold">Önem derecesi <span id="priority-value" class="float-right text-teal">3</span>
          <input id="priority" type="range" name="priority" value="3" min="0" max="5" class="mt-4 w-full accent-teal">
        </label>
      </div>
      <label id="control-date-field" class="hidden 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" 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 ödev, bu tarihten önce tamamlanacak şekilde programa yerleştirilir.</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" placeholder="Örn. Konu özeti çıkar, zor soruları işaretle." 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"></textarea>
      </label>
      <div class="grid gap-4 sm:grid-cols-2">
        <label class="block text-sm font-bold">Başlangıç sayfası
          <input type="number" min="1" name="start_page" required placeholder="10" 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" required placeholder="50" 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>
      <button class="w-full rounded-xl bg-ink px-4 py-3 text-sm font-bold text-white shadow-soft transition hover:bg-navy"><i class="fa-solid fa-plus mr-2"></i> İş ekle</button>
    </form>
  </div>

  <div class="min-w-0 overflow-hidden rounded-2xl border border-white bg-white/85 shadow-card">
    <div class="flex flex-col items-start justify-between gap-3 border-b border-slate-100 px-6 py-5 sm:flex-row sm:items-center">
      <div><h2 class="font-bold">Aktif işler</h2><p class="mt-1 text-xs text-slate-500">{{ tasks|length }} parça çalışma aralığı</p></div>
      <span class="shrink-0 rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-bold text-slate-600">Önceliğe göre</span>
    </div>
    {% if tasks %}
    <div class="divide-y divide-slate-100">
      {% for task in tasks %}
      <article class="min-w-0 p-5 sm:px-6">
        <div class="task-card-details">
          <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {% if task.task_type == 'Ödev' %}bg-rose-50 text-rose-500{% else %}bg-teal-50 text-teal-600{% endif %}"><i class="fa-solid {% if task.task_type == 'Ödev' %}fa-clipboard-list{% else %}fa-book-open{% endif %}"></i></span>
          <div class="task-card-details__content">
            <h3 class="break-words font-bold">{{ task.book.name }}</h3>
            <div class="mt-2 flex flex-wrap items-center gap-2">
              <span class="rounded-full px-2 py-0.5 text-[10px] font-bold {% if task.task_type == 'Ödev' %}bg-rose-100 text-rose-600{% else %}bg-teal-100 text-teal-700{% endif %}">{{ task.task_type }}</span>
              <span class="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold text-amber-700">Önem {{ task.priority }}/5</span>
              {% if task.task_type == 'Ödev' and task.control_date %}<span class="rounded-full bg-rose-50 px-2 py-0.5 text-[10px] font-bold text-rose-600"><i class="fa-regular fa-calendar-check mr-1"></i>Kontrol: {{ task.control_date.strftime('%d.%m.%Y') }}</span>{% endif %}
            </div>
            <p class="mt-2 break-words text-sm leading-6 text-slate-500"><strong class="text-slate-700">{{ task.start_page }}–{{ task.end_page }}.</strong> sayfalar · {{ task.page_count }} sayfa{% if task.task_type == 'Ödev' and task.control_date %} · <span class="font-medium text-rose-600">kontrol tarihinden önce bitmeli</span>{% endif %}</p>
            {% if task.description %}<p class="mt-2 break-words rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-600"><i class="fa-regular fa-note-sticky mr-1 text-teal"></i>{{ task.description }}</p>{% endif %}
          </div>
        </div>
        <div class="mt-4 flex flex-wrap gap-2 border-t border-slate-100 pt-4">
          <form method="post" action="{{ url_for('complete_task', task_id=task.id) }}" onsubmit="return confirm('Bu işin tüm sayfaları tamamlandı mı?')"><button title="Tümünü tamamla" class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition hover:bg-emerald-100"><i class="fa-solid fa-check"></i></button></form>
          <a href="{{ url_for('edit_task', task_id=task.id) }}" title="İşi düzenle" class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-50 text-sky-600 transition hover:bg-sky-100"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{{ url_for('delete_task', task_id=task.id) }}" onsubmit="return confirm('Bu iş silinsin mi?')"><button title="İşi sil" class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 text-slate-400 transition hover:bg-rose-50 hover:text-rose-500"><i class="fa-solid fa-trash"></i></button></form>
        </div>
      </article>
      {% endfor %}
    </div>
    {% else %}
    <div class="p-14 text-center"><span class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-teal-50 text-xl text-teal"><i class="fa-solid fa-check-double"></i></span><p class="mt-4 font-bold">Açık işin yok.</p><p class="mt-1 text-sm text-slate-500">Sol taraftan yeni bir çalışma aralığı ekleyebilirsin.</p></div>
    {% endif %}
  </div>
</section>
{% else %}
<div class="rounded-2xl border border-dashed border-teal-200 bg-white/70 p-12 text-center"><span class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-teal-100 text-teal"><i class="fa-solid fa-book"></i></span><h2 class="mt-5 text-xl font-bold">Önce bir kitap eklemelisin.</h2><p class="mt-2 text-sm text-slate-500">Görev ve ödevler bir kitaba bağlanır.</p><a href="{{ url_for('books') }}" class="mt-6 inline-block rounded-xl bg-teal px-5 py-3 text-sm font-bold text-white">Kitaplara git</a></div>
{% endif %}
{% 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');
if(priority){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='';
}
if(taskType){taskType.addEventListener('change',toggleControlDate);toggleControlDate()}
</script>
{% endblock %}