{% extends "base.html" %}
{% block title %}知识评价 - 满意错题本{% endblock %}
{% block page_title %}知识评价{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <div class="flex items-center gap-4">
    <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center text-amber-600">
      <i class="fa-solid fa-clipboard-check text-lg"></i>
    </div>
    <div>
      <p class="text-sm font-semibold text-gray-700">知识评价</p>
      <p class="text-xs text-gray-400 mt-0.5">记录老师定期评价结果</p>
    </div>
  </div>
  <button id="btnAddEval" class="inline-flex items-center gap-2 bg-amber-500 text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-amber-600 transition shadow-sm">
    <i class="fa-solid fa-plus"></i>新增评价
  </button>
</div>

<!-- Subject filter -->
<div class="bg-white rounded-2xl border border-gray-100 p-3 mb-6 flex items-center gap-2 overflow-x-auto">
  <a href="/evaluations" class="flex-shrink-0 px-4 py-1.5 rounded-xl text-xs font-medium transition {% if not current_subject %}bg-amber-500 text-white shadow-sm{% else %}bg-gray-50 text-gray-500 hover:bg-gray-100{% endif %}">全部</a>
  {% for s in subjects %}
  <a href="/evaluations?subject_id={{ s.id }}" class="flex-shrink-0 px-4 py-1.5 rounded-xl text-xs font-medium transition {% if current_subject == s.id %}bg-amber-500 text-white shadow-sm{% else %}bg-gray-50 text-gray-500 hover:bg-gray-100{% endif %}">
    <span class="w-2 h-2 rounded-full inline-block mr-1.5" style="background-color:{{ s.color }}"></span>{{ s.name }}
  </a>
  {% endfor %}
</div>

{% if evaluations %}
<div class="space-y-3">
  {% for ev in evaluations %}
  {% set subject = subjects | selectattr('id','equalto',ev.subject_id) | first %}
  <div class="bg-white rounded-2xl border border-gray-100 p-5 hover:shadow-sm transition">
    <div class="flex items-start gap-4">
      {% if subject %}
      <span class="w-3 h-3 rounded-full mt-1.5 flex-shrink-0" style="background-color:{{ subject.color }};box-shadow:0 0 0 3px {{ subject.color }}20"></span>
      {% endif %}
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-3 mb-1 flex-wrap">
          <h4 class="font-bold text-gray-800 text-sm">{{ ev.title }}</h4>
          <span class="text-xs text-gray-400 bg-gray-100 px-2.5 py-0.5 rounded-full">{{ ev.date }}</span>
          {% if subject %}<span class="text-xs text-gray-400">· {{ subject.name }}</span>{% endif %}
        </div>
        {% if ev.content %}
        <p class="text-sm text-gray-500 leading-relaxed mt-2">{{ ev.content }}</p>
        {% endif %}
        {% if ev.filename %}
        {% set ext = ev.filename.split('.') | last | lower %}
        {% if ext in ['jpg','jpeg','png','webp','gif','bmp'] %}
        <div class="mt-3">
          <div class="relative rounded-xl overflow-hidden bg-gray-100 cursor-pointer group max-w-md" onclick="openLightbox('/static/uploads/{{ ev.filename }}','{{ ev.title }}',['/static/uploads/{{ ev.filename }}'],0)">
            <img src="/static/uploads/{{ ev.filename }}" class="w-full h-auto max-h-80 object-contain group-hover:scale-105 transition-transform duration-300" loading="lazy">
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition flex items-center justify-center">
              <i class="fa-solid fa-magnifying-glass-plus text-white opacity-0 group-hover:opacity-100 text-xl transition"></i>
            </div>
          </div>
        </div>
        {% else %}
        <div class="mt-3">
          <a href="/static/uploads/{{ ev.filename }}" target="_blank" class="inline-flex items-center gap-2 text-xs text-amber-600 hover:text-amber-700 bg-amber-50 px-3 py-1.5 rounded-lg transition">
            <i class="fa-solid fa-paperclip"></i>{{ ev.filename }}
          </a>
        </div>
        {% endif %}
        {% endif %}
      </div>
      <div class="flex-shrink-0 flex items-center gap-3">
        <span class="text-xs text-gray-300 hidden sm:block">{{ ev.upload_time.strftime('%m-%d %H:%M') }}</span>
        <form method="POST" action="/evaluation/{{ ev.id }}/delete" onsubmit="return confirm('确定删除此评价？')">
          <button type="submit" class="text-gray-300 hover:text-red-400 transition" title="删除"><i class="fa-solid fa-trash-can"></i></button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
  <div class="text-6xl text-gray-200 mb-4"><i class="fa-solid fa-clipboard"></i></div>
  <p class="text-gray-400 mb-6">暂无评价记录</p>
  <button id="btnAddEvalEmpty" class="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-amber-600 transition">
    <i class="fa-solid fa-plus"></i>新增第一条评价
  </button>
</div>
{% endif %}

<!-- Modal -->
<div id="evalModal" class="fixed inset-0 z-50 hidden items-center justify-center modal-overlay bg-black/40">
  <div class="bg-white rounded-2xl w-full max-w-lg mx-4 shadow-2xl max-h-[90vh] overflow-y-auto">
    <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10 rounded-t-2xl">
      <h3 class="font-bold text-gray-800">新增知识评价</h3>
      <button id="btnCloseEvalModal" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
    </div>
    <form method="POST" action="/evaluations/add" enctype="multipart/form-data" class="p-6 space-y-5">
      <div>
        <label class="block text-sm font-medium text-gray-600 mb-2">科目 <span class="text-red-400">*</span></label>
        <select name="subject_id" required class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-400 transition bg-white">
          <option value="">请选择科目</option>
          {% for s in subjects %}
          <option value="{{ s.id }}">{{ s.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">评价日期</label>
          <input type="date" name="date" required value="{{ today }}"
            class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-300 transition">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">标题</label>
          <input type="text" name="title" required placeholder="简要描述评价内容"
            class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-300 transition">
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-600 mb-2">详细内容</label>
        <textarea name="content" rows="4" placeholder="描述老师的评价内容、知识点掌握情况、改进建议等..."
          class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-300 transition resize-none"></textarea>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-600 mb-2">附件（可选）</label>
        <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png,.webp"
          class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-amber-50 file:text-amber-600 hover:file:bg-amber-100">
      </div>
      <div class="flex gap-3 pt-2">
        <button type="button" id="btnCancelEval" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
        <button type="submit" class="flex-1 bg-amber-500 text-white py-2.5 rounded-xl text-sm font-medium hover:bg-amber-600 transition">保存评价</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function(){
  var modal = document.getElementById('evalModal');
  function openModal(){ if(modal) modal.classList.remove('hidden'); }
  function closeModal(){ if(modal) modal.classList.add('hidden'); }
  var btns = document.querySelectorAll('#btnAddEval, #btnAddEvalEmpty');
  var closeBtns = document.querySelectorAll('#btnCloseEvalModal, #btnCancelEval');
  btns.forEach(function(b){ if(b) b.addEventListener('click', openModal); });
  closeBtns.forEach(function(b){ if(b) b.addEventListener('click', closeModal); });
  if(modal){
    modal.addEventListener('click', function(e){
      if(e.target === modal) closeModal();
    });
  }
  var today = new Date().toISOString().slice(0,10);
  document.querySelectorAll('input[name="date"]').forEach(function(el){
    if(!el.value) el.value = today;
  });
})();
</script>
{% endblock %}