{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-start justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">Import Fee Structure</h1>
      <p class="mt-1 text-sm text-slate-500">Upload Excel with Fee_Structure and Fee_Services sheets.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/billing/fee-structures/template" class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800 shadow-sm hover:bg-emerald-100">Download Excel Template</a>
      <a href="/billing/fee-structures/list" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Fee Structure List</a>
    </div>
  </div>

  {% if result %}
  <div class="rounded-2xl border {{ 'border-emerald-200 bg-emerald-50 text-emerald-900' if result.success else 'border-red-200 bg-red-50 text-red-900' }} p-4">
    {% if result.success %}
      <div class="font-semibold">Import completed</div>
      <div class="mt-1 text-sm">Created: {{ result.created }} | Updated: {{ result.updated }}</div>
    {% else %}
      <div class="font-semibold">Import failed</div>
      <ul class="mt-2 list-disc pl-5 text-sm">
        {% for error in result.errors %}<li>{{ error }}</li>{% endfor %}
      </ul>
    {% endif %}
  </div>
  {% endif %}

  <form method="post" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <label class="block">
      <span class="text-sm font-medium text-slate-700">Excel File</span>
      <input type="file" name="import_file" accept=".xlsx,.xlsm" required class="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
    </label>
    <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-600">
      <div class="font-semibold text-slate-800">How to import using template</div>
      <ol class="mt-2 list-decimal space-y-1 pl-5">
        <li>Click <strong>Download Excel Template</strong>.</li>
        <li>Fill <strong>Fee_Structure</strong> for client-wise package/header details.</li>
        <li>Fill <strong>Fee_Services</strong> for services included in each package.</li>
        <li>Upload the completed file here. Imported fee structures can then be used in <strong>Generate Bills</strong>.</li>
      </ol>
      <div class="mt-4 font-semibold text-slate-800">Required sheets</div>
      <div class="mt-1">Fee_Structure: client, billing group, mode, frequency, fee and tax details.</div>
      <div>Fee_Services: services included in each billing group.</div>
    </div>
    <div class="flex justify-end gap-3">
      <a href="/billing/fee-structures/list" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">Back</a>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Import Fee Structure</button>
    </div>
  </form>
</div>
{% endblock %}