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

{% block title %}{% trans "Generate KPI Report" %} - PX360{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
  <!-- Header -->
  <header class="mb-6">
    <a href="{% url 'analytics:kpi_report_list' %}" 
       class="inline-flex items-center gap-2 text-sm font-bold text-blue hover:text-navy mb-3 transition">
      <i data-lucide="arrow-left" class="w-4 h-4"></i>
      {% trans "Back to Reports" %}
    </a>
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
      <i data-lucide="file-plus" class="w-7 h-7"></i>
      {% trans "Generate KPI Report" %}
    </h1>
    <p class="text-sm text-slate mt-1">{% trans "Create a new monthly KPI report for a specific hospital and period." %}</p>
  </header>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title flex items-center gap-2">
            <i data-lucide="settings-2" class="w-4 h-4"></i>
            {% trans "Report Configuration" %}
          </h2>
        </div>
        
        <form method="post" action="{% url 'analytics:kpi_report_generate_submit' %}" 
              hx-post="{% url 'analytics:kpi_report_generate_submit' %}"
              hx-target="#form-result"
              hx-swap="innerHTML">
          {% csrf_token %}
          
          <div class="space-y-6">
            <!-- Report Type -->
            <div>
              <label for="report_type" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                {% trans "Report Type" %} <span class="text-red-500">*</span>
              </label>
              <select name="report_type" id="report_type" required 
                      class="w-full px-4 py-2.5 bg-slate-100 border border-transparent rounded-lg text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                <option value="">{% trans "Select Report Type" %}</option>
                {% for type_value, type_label in report_types %}
                <option value="{{ type_value }}">{{ type_label }}</option>
                {% endfor %}
              </select>
              <p class="text-xs text-slate mt-1.5 flex items-center gap-1">
                <i data-lucide="info" class="w-3 h-3"></i>
                {% trans "Choose the type of KPI report to generate." %}
              </p>
            </div>

            <!-- Hospital -->
            <div>
              <label for="hospital" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                {% trans "Hospital" %} <span class="text-red-500">*</span>
              </label>
              <select name="hospital" id="hospital" required 
                      class="w-full px-4 py-2.5 bg-slate-100 border border-transparent rounded-lg text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                <option value="">{% trans "Select Hospital" %}</option>
                {% for hospital in hospitals %}
                <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                {% endfor %}
              </select>
            </div>

            <!-- Year and Month -->
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="year" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                  {% trans "Year" %} <span class="text-red-500">*</span>
                </label>
                <select name="year" id="year" required 
                        class="w-full px-4 py-2.5 bg-slate-100 border border-transparent rounded-lg text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                  <option value="">{% trans "Select Year" %}</option>
                  {% for y in years %}
                  <option value="{{ y }}" {% if y == current_year %}selected{% endif %}>{{ y }}</option>
                  {% endfor %}
                </select>
              </div>
              
              <div>
                <label for="month" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                  {% trans "Month" %} <span class="text-red-500">*</span>
                </label>
                <select name="month" id="month" required 
                        class="w-full px-4 py-2.5 bg-slate-100 border border-transparent rounded-lg text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                  <option value="">{% trans "Select Month" %}</option>
                  {% for m, m_label in months %}
                  <option value="{{ m }}" {% if m == current_month %}selected{% endif %}>{{ m_label }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <!-- Info Box -->
            <div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
              <div class="flex items-start gap-3">
                <div class="p-2 bg-blue-100 rounded-lg flex-shrink-0">
                  <i data-lucide="info" class="w-4 h-4 text-blue"></i>
                </div>
                <div>
                  <p class="text-sm font-bold text-navy">{% trans "Report Generation Information" %}</p>
                  <p class="text-sm text-slate mt-1 leading-relaxed">
                    {% trans "The report will be generated based on data from the selected month. This may take a few moments depending on the amount of data. If a report already exists for this period, it will be regenerated with the latest data." %}
                  </p>
                </div>
              </div>
            </div>

            <!-- Result Container -->
            <div id="form-result"></div>

            <!-- Buttons -->
            <div class="flex gap-3 pt-4 border-t">
              <button type="submit" class="btn-primary flex-1 flex items-center justify-center gap-2 py-3">
                <i data-lucide="play" class="w-4 h-4"></i>
                {% trans "Generate Report" %}
              </button>
              <a href="{% url 'analytics:kpi_report_list' %}" class="btn-secondary px-6 py-3">
                {% trans "Cancel" %}
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Sidebar - Available Reports -->
    <div class="lg:col-span-1">
      <div class="card">
        <div class="card-header">
          <h3 class="text-sm font-bold text-navy flex items-center gap-2">
            <i data-lucide="list" class="w-4 h-4"></i>
            {% trans "Available KPI Reports" %}
          </h3>
        </div>
        
        <div class="space-y-2">
          <!-- MOH Reports -->
          <div class="p-2.5 bg-light rounded-lg">
            <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-2">
              {% trans "Ministry of Health" %}
            </p>
            <div class="space-y-1.5">
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-navy text-white rounded flex-shrink-0">MOH-2</span>
                <span class="text-slate truncate">{% trans "72-Hour Resolution" %}</span>
              </div>
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-navy text-white rounded flex-shrink-0">MOH-1</span>
                <span class="text-slate truncate">{% trans "Patient Experience" %}</span>
              </div>
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-navy text-white rounded flex-shrink-0">MOH-3</span>
                <span class="text-slate truncate">{% trans "Resolution Satisfaction" %}</span>
              </div>
            </div>
          </div>

          <!-- Department Reports -->
          <div class="p-2.5 bg-light rounded-lg">
            <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-2">
              {% trans "Departmental" %}
            </p>
            <div class="space-y-1.5">
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-blue text-white rounded flex-shrink-0">Dep-KPI-4</span>
                <span class="text-slate truncate">{% trans "Response Rate" %}</span>
              </div>
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-blue text-white rounded flex-shrink-0">KPI-6</span>
                <span class="text-slate truncate">{% trans "Activation (2h)" %}</span>
              </div>
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-blue text-white rounded flex-shrink-0">KPI-7</span>
                <span class="text-slate truncate">{% trans "Unactivated" %}</span>
              </div>
            </div>
          </div>

          <!-- N-PAD Reports -->
          <div class="p-2.5 bg-light rounded-lg">
            <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-2">
              {% trans "N-PAD Standards" %}
            </p>
            <div class="space-y-1.5">
              <div class="flex items-center gap-2 text-sm">
                <span class="px-1.5 py-0.5 text-xs font-bold bg-navy text-white rounded flex-shrink-0">N-PAD-001</span>
                <span class="text-slate truncate">{% trans "Resolution" %}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Quick Tips -->
        <div class="mt-4 pt-4 border-t">
          <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-2">
            {% trans "Quick Tips" %}
          </p>
          <ul class="space-y-2 text-sm text-slate">
            <li class="flex items-start gap-2">
              <i data-lucide="check-circle" class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"></i>
              <span>{% trans "Reports are generated automatically every month" %}</span>
            </li>
            <li class="flex items-start gap-2">
              <i data-lucide="check-circle" class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"></i>
              <span>{% trans "You can regenerate any report with latest data" %}</span>
            </li>
            <li class="flex items-start gap-2">
              <i data-lucide="check-circle" class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"></i>
              <span>{% trans "PDF export is available for all reports" %}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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