{% extends 'base.html' %}
{% block title %}Program Takvimi · Odak Planım{% endblock %}
{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
<style>
  /* Bu görünüm yalnızca PDF oluşturulurken DOM'a eklenir. */
  .pdf-export-host { position: fixed; top: 0; left: -20000px; pointer-events: none; }
  .pdf-export-source {
    box-sizing: border-box;
    width: 1120px;
    padding: 38px;
    background: #ffffff;
    color: #24344d;
    font-family: 'DM Sans', Arial, sans-serif;
  }
  .pdf-export-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 2px solid #e2e8f0; padding-bottom: 18px; }
  .pdf-export-kicker { margin: 0 0 7px; color: #0d9488; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .pdf-export-title { margin: 0; color: #10233f; font-size: 27px; line-height: 1.2; }
  .pdf-export-count { margin: 0; flex: 0 0 auto; border-radius: 999px; background: #ecfdf5; color: #0f766e; padding: 9px 13px; font-size: 12px; font-weight: 700; }
  .pdf-export-days { margin-top: 18px; }
  .pdf-export-day {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 13px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pdf-export-day:first-child { margin-top: 0; }
  .pdf-export-day-info { box-sizing: border-box; flex: 0 0 138px; border: 1px solid #ccfbf1; border-radius: 12px; background: #f0fdfa; padding: 14px 13px; }
  .pdf-export-weekday { margin: 0; color: #0f766e; font-size: 12px; font-weight: 700; }
  .pdf-export-date { margin: 5px 0 0; color: #10233f; font-size: 17px; font-weight: 700; }
  .pdf-export-day-count { margin: 12px 0 0; color: #64748b; font-size: 11px; line-height: 1.45; }
  .pdf-export-cards { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-content: flex-start; gap: 10px; min-width: 0; }
  .pdf-export-slot { box-sizing: border-box; flex: 0 0 calc((100% - 40px) / 5); border: 1px solid #e2e8f0; border-radius: 11px; background: #ffffff; padding: 11px; box-shadow: 0 3px 10px rgba(15, 23, 42, .05); }
  .pdf-export-time { margin: 0; color: #0d9488; font-size: 11px; font-weight: 700; }
  .pdf-export-task { margin-top: 8px; border-top: 1px solid #f1f5f9; padding-top: 8px; }
  .pdf-export-task:first-of-type { border-top: 0; padding-top: 0; }
  .pdf-export-book { margin: 0; color: #334155; font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .pdf-export-meta { margin: 5px 0 0; color: #64748b; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
  .pdf-export-description { margin: 5px 0 0; color: #94a3b8; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
  .pdf-export-empty { box-sizing: border-box; flex: 1 1 auto; border: 1px dashed #cbd5e1; border-radius: 11px; color: #94a3b8; padding: 16px; font-size: 11px; text-align: center; }
</style>
{% endblock %}
{% block content %}
<section class="mb-7 flex flex-col justify-between gap-4 xl:flex-row xl:items-end">
  <div>
    <a href="{{ url_for('schedules') }}" class="text-sm font-bold text-teal"><i class="fa-solid fa-arrow-left mr-2"></i> Programlarıma dön</a>
    <p class="mt-5 text-sm font-bold uppercase tracking-[.18em] text-teal">Takvim görünümü</p>
    <h1 class="display-font mt-2 text-4xl font-bold">{{ schedule.start_date.strftime('%d %B') }} — {{ schedule.end_date.strftime('%d %B %Y') }}</h1>
    <p class="mt-3 text-sm text-slate-500">Program #{{ schedule.id }} · {{ schedule.created_at.strftime('%d.%m.%Y %H:%M') }} tarihinde kaydedildi</p>
  </div>
  <div class="flex flex-wrap gap-2">
    <button type="button" id="export-pdf" class="rounded-xl bg-rose-50 px-4 py-3 text-sm font-bold text-rose-600 transition hover:bg-rose-100"><i class="fa-solid fa-file-pdf mr-2"></i> PDF indir</button>
    <button type="button" id="export-excel" class="rounded-xl bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700 transition hover:bg-emerald-100"><i class="fa-solid fa-file-excel mr-2"></i> Excel indir</button>
    <a href="{{ url_for('schedule_create') }}" class="rounded-xl bg-teal px-4 py-3 text-sm font-bold text-white"><i class="fa-solid fa-calendar-plus mr-2"></i> Yeni Program</a>
  </div>
</section>

<section id="calendar-export" class="rounded-2xl border border-white bg-white/90 p-5 shadow-card sm:p-6">
  <div class="mb-6 flex flex-col justify-between gap-3 border-b border-slate-100 pb-5 sm:flex-row sm:items-center">
    <div><h2 class="font-bold">Çalışma takvimi</h2><p class="mt-1 text-xs text-slate-500">Gün, saat ve görev hücreleriyle kaydedilen program.</p></div>
    <span id="entry-count" class="rounded-full bg-teal-50 px-3 py-1.5 text-xs font-bold text-teal"></span>
  </div>
  <div id="calendar" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-7"></div>
</section>

<section class="mt-7 overflow-hidden rounded-2xl border border-white bg-white/85 shadow-card">
  <div class="border-b border-slate-100 px-6 py-5"><h2 class="font-bold">Liste görünümü</h2><p class="mt-1 text-xs text-slate-500">Dışa aktarılan tablo bu bilgilerle oluşturulur.</p></div>
  <div class="overflow-x-auto">
    <table class="min-w-full text-left text-sm">
      <thead class="bg-slate-50 text-xs uppercase tracking-wider text-slate-500"><tr><th class="px-5 py-4">Tarih</th><th class="px-5 py-4">Saat</th><th class="px-5 py-4">Kitap</th><th class="px-5 py-4">Tür</th><th class="px-5 py-4">Açıklama</th><th class="px-5 py-4">Sayfalar</th></tr></thead>
      <tbody id="schedule-table" class="divide-y divide-slate-100"></tbody>
    </table>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>
const scheduleState = {{ schedule_state|tojson }};
const weekdays = ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'];
const calendar = document.getElementById('calendar');
const table = document.getElementById('schedule-table');

function localDate(iso) { return new Date(iso + 'T12:00:00'); }
function displayDate(iso) { return localDate(iso).toLocaleDateString('tr-TR', {day: 'numeric', month: 'short'}); }
function pageLabel(content) {
  if (content.pages_label) return content.pages_label;
  return content.page_start !== null && content.page_start !== undefined && content.page_end !== null && content.page_end !== undefined ? String(content.page_start) + '-' + String(content.page_end) : '—';
}
function timeLabel(slot) { return [slot.time_start, slot.time_end].filter(Boolean).join(' – ') || 'Saat belirtilmedi'; }
function dayLabel(iso) { return weekdays[localDate(iso).getDay()]; }
function allRows() {
  return scheduleState.days.flatMap(function(day) {
    return day.slots.flatMap(function(slot) {
      const contents = Array.isArray(slot.contents) ? slot.contents : [];
      return contents.length ? contents.map(function(content) { return Object.assign({date: day.date, time_start: slot.time_start, time_end: slot.time_end}, content); }) : [{date: day.date, time_start: slot.time_start, time_end: slot.time_end, book_name: '', task_type: '', description: '', page_start: null, page_end: null}];
    });
  });
}
function addText(parent, tag, classes, value) { const item = document.createElement(tag); item.className = classes; item.textContent = value; parent.append(item); return item; }
function renderCalendar() {
  scheduleState.days.forEach(function(day) {
    const card = document.createElement('article');
    card.className = 'min-w-0 rounded-xl border border-slate-100 bg-slate-50/70 p-3';
    const head = document.createElement('div');
    head.className = 'mb-3 border-b border-slate-200/70 pb-2';
    addText(head, 'p', 'text-xs font-bold text-teal', dayLabel(day.date));
    addText(head, 'p', 'mt-0.5 text-sm font-bold text-slate-700', displayDate(day.date));
    card.append(head);
    if (!day.slots.length) {
      addText(card, 'p', 'rounded-lg border border-dashed border-slate-200 px-2.5 py-3 text-center text-[11px] text-slate-400', 'Saat dilimi eklenmemiş');
    }
    day.slots.slice().sort(function(a, b) { return String(a.time_start).localeCompare(String(b.time_start)); }).forEach(function(slot) {
      const entry = document.createElement('div');
      entry.className = 'mb-2 rounded-lg border border-white bg-white p-2.5 shadow-sm last:mb-0';
      addText(entry, 'p', 'text-[11px] font-bold text-teal', timeLabel(slot));
      const contents = Array.isArray(slot.contents) ? slot.contents : [];
      if (contents.length) {
        contents.forEach(function(content, contentIndex) {
          const contentCard = document.createElement('div');
          contentCard.className = contentIndex ? 'mt-2 border-t border-slate-100 pt-2' : 'mt-1';
          addText(contentCard, 'p', 'truncate text-xs font-bold text-slate-700', content.book_name);
          addText(contentCard, 'p', 'mt-1 text-[11px] text-slate-500', pageLabel(content) + ' · ' + content.task_type);
          if (content.description) addText(contentCard, 'p', 'mt-1 text-[10px] leading-4 text-slate-400', content.description);
          entry.append(contentCard);
        });
      } else {
        addText(entry, 'p', 'mt-1 text-[11px] italic text-slate-400', 'İçerik eklenmemiş');
      }
      card.append(entry);
    });
    calendar.append(card);
  });
}
function renderTable() {
  allRows().sort(function(a, b) { return (a.date + a.time_start).localeCompare(b.date + b.time_start); }).forEach(function(slot) {
    const row = document.createElement('tr');
    row.className = 'hover:bg-slate-50';
    [displayDate(slot.date) + ' · ' + dayLabel(slot.date), timeLabel(slot), slot.book_name || '—', slot.task_type || 'Boş saat dilimi', slot.description || '—', pageLabel(slot)].forEach(function(value, index) {
      const cell = document.createElement('td');
      cell.className = 'px-5 py-4 ' + (index === 2 ? 'font-bold text-slate-700' : 'text-slate-600');
      cell.textContent = value; row.append(cell);
    });
    table.append(row);
  });
}
const entries = allRows().filter(function(slot) { return slot.book_name; });
document.getElementById('entry-count').textContent = entries.length + ' planlanan iş';
renderCalendar();
renderTable();

function pdfElement(tag, className, text) {
  const element = document.createElement(tag);
  element.className = className;
  if (text !== undefined && text !== null) element.textContent = text;
  return element;
}
function dayEntryCount(day) {
  return day.slots.reduce(function(total, slot) {
    return total + (Array.isArray(slot.contents) ? slot.contents.length : 0);
  }, 0);
}
function buildPdfExport() {
  const source = pdfElement('section', 'pdf-export-source');
  const header = pdfElement('header', 'pdf-export-header');
  const heading = document.createElement('div');
  heading.append(
    pdfElement('p', 'pdf-export-kicker', 'Çalışma takvimi'),
    pdfElement('h1', 'pdf-export-title', '{{ schedule.start_date.strftime('%d.%m.%Y') }} — {{ schedule.end_date.strftime('%d.%m.%Y') }}')
  );
  header.append(heading, pdfElement('p', 'pdf-export-count', entries.length + ' planlanan iş'));
  source.append(header);

  const days = pdfElement('div', 'pdf-export-days');
  scheduleState.days.forEach(function(day) {
    const row = pdfElement('section', 'pdf-export-day');
    const info = pdfElement('div', 'pdf-export-day-info');
    const taskCount = dayEntryCount(day);
    info.append(
      pdfElement('p', 'pdf-export-weekday', dayLabel(day.date)),
      pdfElement('p', 'pdf-export-date', displayDate(day.date)),
      pdfElement('p', 'pdf-export-day-count', taskCount ? taskCount + ' planlanan iş' : 'Planlanan iş yok')
    );
    const cards = pdfElement('div', 'pdf-export-cards');
    const slots = day.slots.slice().sort(function(a, b) { return String(a.time_start).localeCompare(String(b.time_start)); });
    if (!slots.length) {
      cards.append(pdfElement('p', 'pdf-export-empty', 'Bu gün için saat dilimi eklenmemiş.'));
    }
    slots.forEach(function(slot) {
      const card = pdfElement('article', 'pdf-export-slot');
      card.append(pdfElement('p', 'pdf-export-time', timeLabel(slot)));
      const contents = Array.isArray(slot.contents) ? slot.contents : [];
      if (!contents.length) {
        card.append(pdfElement('p', 'pdf-export-meta', 'İçerik eklenmemiş'));
      }
      contents.forEach(function(content) {
        const task = pdfElement('div', 'pdf-export-task');
        task.append(
          pdfElement('p', 'pdf-export-book', content.book_name || 'İçerik eklenmemiş'),
          pdfElement('p', 'pdf-export-meta', pageLabel(content) + ' · ' + (content.task_type || 'Görev'))
        );
        if (content.description) task.append(pdfElement('p', 'pdf-export-description', content.description));
        card.append(task);
      });
      cards.append(card);
    });
    row.append(info, cards);
    days.append(row);
  });
  source.append(days);
  return source;
}

document.getElementById('export-pdf').addEventListener('click', async function() {
  const button = this;
  if (button.disabled) return;
  const originalLabel = button.innerHTML;
  const source = buildPdfExport();
  const host = pdfElement('div', 'pdf-export-host');
  host.append(source);
  button.disabled = true;
  button.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> PDF hazırlanıyor';
  document.body.append(host);
  try {
    if (document.fonts && document.fonts.ready) await document.fonts.ready;
    await new Promise(function(resolve) { requestAnimationFrame(resolve); });
    await html2pdf().set({
      margin: 8,
      filename: 'odak-programi-{{ schedule.id }}.pdf',
      image: {type: 'jpeg', quality: .98},
      html2canvas: {scale: 2, useCORS: true, logging: false},
      jsPDF: {unit: 'mm', format: 'a4', orientation: 'landscape'},
      pagebreak: {mode: ['css', 'legacy'], avoid: ['.pdf-export-day']}
    }).from(source).save();
  } finally {
    host.remove();
    button.disabled = false;
    button.innerHTML = originalLabel;
  }
});
document.getElementById('export-excel').addEventListener('click', function() {
  const rows = allRows().map(function(slot) {
    return {'Tarih': slot.date, 'Gün': dayLabel(slot.date), 'Saat Aralığı': timeLabel(slot), 'Kitap': slot.book_name || '', 'İş Türü': slot.task_type || '', 'Açıklama': slot.description || '', 'Sayfa Aralığı': pageLabel(slot)};
  });
  const sheet = XLSX.utils.json_to_sheet(rows);
  sheet['!cols'] = [{wch: 14}, {wch: 14}, {wch: 18}, {wch: 30}, {wch: 14}, {wch: 38}, {wch: 18}];
  const book = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(book, sheet, 'Program');
  XLSX.writeFile(book, 'odak-programi-{{ schedule.id }}.xlsx');
});
</script>
{% endblock %}