{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Bulk Survey Jobs" %} - PX360{% endblock %}

{% block content %}
<div class="p-6">
  <!-- Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
      <i data-lucide="layers" class="w-7 h-7"></i>
      {% trans "Bulk Survey Jobs" %}
    </h1>
    <p class="text-slate mt-1">{% trans "Track the status of bulk survey sending operations" %}</p>
  </div>

  <!-- Jobs Table -->
  <div class="card">
    {% if jobs %}
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-light">
          <tr>
            <th class="p-3 text-left">{% trans "Job" %}</th>
            <th class="p-3 text-left">{% trans "Hospital" %}</th>
            <th class="p-3 text-center">{% trans "Progress" %}</th>
            <th class="p-3 text-center">{% trans "Success" %}</th>
            <th class="p-3 text-center">{% trans "Failed" %}</th>
            <th class="p-3 text-left">{% trans "Status" %}</th>
            <th class="p-3 text-left">{% trans "Created" %}</th>
            <th class="p-3 text-center">{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          {% for job in jobs %}
          <tr class="hover:bg-light/50">
            <td class="p-3">
              <div class="font-medium">{{ job.name|truncatechars:40 }}</div>
              <div class="text-xs text-slate">{{ job.survey_template.name|truncatechars:30 }}</div>
            </td>
            <td class="p-3">{{ job.hospital.name }}</td>
            <td class="p-3 text-center">
              <div class="flex items-center gap-2">
                <div class="w-16 bg-slate-200 rounded-full h-1.5">
                  <div class="bg-blue h-1.5 rounded-full" style="width: {{ job.progress_percentage }}%"></div>
                </div>
                <span class="text-xs">{{ job.progress_percentage }}%</span>
              </div>
            </td>
            <td class="p-3 text-center">
              <span class="text-green-600 font-medium">{{ job.success_count }}</span>
            </td>
            <td class="p-3 text-center">
              {% if job.failed_count > 0 %}
              <span class="text-red-600 font-medium">{{ job.failed_count }}</span>
              {% else %}
              <span class="text-slate">-</span>
              {% endif %}
            </td>
            <td class="p-3">
              <span class="px-2 py-1 rounded text-xs font-medium
                {% if job.status == 'completed' %}bg-green-100 text-green-800
                {% elif job.status == 'failed' %}bg-red-100 text-red-800
                {% elif job.status == 'processing' %}bg-blue-100 text-blue-800
                {% elif job.status == 'partial' %}bg-yellow-100 text-yellow-800
                {% else %}bg-slate-100 text-slate-800{% endif %}">
                {{ job.get_status_display }}
              </span>
            </td>
            <td class="p-3 text-xs">{{ job.created_at|date:"Y-m-d H:i" }}</td>
            <td class="p-3 text-center">
              <a href="{% url 'surveys:bulk_job_status' job.id %}" class="text-blue hover:text-navy">
                <i data-lucide="eye" class="w-4 h-4"></i>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="text-center py-12">
      <i data-lucide="inbox" class="w-16 h-16 mx-auto mb-4 text-slate/30"></i>
      <h3 class="text-lg font-semibold text-navy mb-2">{% trans "No Jobs Found" %}</h3>
      <p class="text-slate">{% trans "No bulk survey jobs have been created yet." %}</p>
      <a href="{% url 'surveys:his_patient_import' %}" class="btn-primary mt-4 inline-flex items-center gap-2">
        <i data-lucide="upload" class="w-4 h-4"></i>
        {% trans "Import Patients" %}
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  lucide.createIcons();
</script>
{% endblock %}