{% extends 'base.html' %}

{% block title %}{{ form_title }}{% endblock %}

{% block content %}
<section class="content-section verification-entry-page editorial-entry-form">
  <form
    id="verificationClaimForm"
    method="post"
    enctype="multipart/form-data"
    novalidate
    data-invoice-formset
    data-dirty-guard
  >
    {% csrf_token %}
    <input type="hidden" name="form_action_intent" value="" data-form-action-intent>
    {{ invoice_formset.management_form }}

    <div class="surface-card verification-form-card mb-3">
      <div class="verification-form-card__header verification-form-card__header--editorial">
        <div>
          <h2 class="h5 fw-semibold mb-1">Claim Header</h2>
        </div>
      </div>

      {% if claim_form.non_field_errors %}
        <div class="alert alert-danger" role="alert">{{ claim_form.non_field_errors }}</div>
      {% endif %}

      <div class="row g-3">
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="{{ claim_form.claim_reference_number.id_for_label }}">{{ claim_form.claim_reference_number.label }}</label>
          {{ claim_form.claim_reference_number }}
          {% if claim_form.claim_reference_number.errors %}<div class="invalid-feedback d-block">{{ claim_form.claim_reference_number.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="{{ claim_form.date_received.id_for_label }}">{{ claim_form.date_received.label }}</label>
          {{ claim_form.date_received }}
          {% if claim_form.date_received.errors %}<div class="invalid-feedback d-block">{{ claim_form.date_received.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-xl-3">
          <label class="form-label" for="{{ claim_form.applicant_name_english.id_for_label }}">{{ claim_form.applicant_name_english.label }}</label>
          {{ claim_form.applicant_name_english }}
          {% if claim_form.applicant_name_english.errors %}<div class="invalid-feedback d-block">{{ claim_form.applicant_name_english.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-xl-3">
          <label class="form-label" for="{{ claim_form.applicant_name_arabic.id_for_label }}">{{ claim_form.applicant_name_arabic.label }}</label>
          {{ claim_form.applicant_name_arabic }}
          {% if claim_form.applicant_name_arabic.errors %}<div class="invalid-feedback d-block">{{ claim_form.applicant_name_arabic.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.first_document_request_date.id_for_label }}">{{ claim_form.first_document_request_date.label }}</label>
          {{ claim_form.first_document_request_date }}
          {% if claim_form.first_document_request_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.first_document_request_date.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.second_reminder_date.id_for_label }}">{{ claim_form.second_reminder_date.label }}</label>
          {{ claim_form.second_reminder_date }}
          {% if claim_form.second_reminder_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.second_reminder_date.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.final_report_without_missing_docs_date.id_for_label }}">{{ claim_form.final_report_without_missing_docs_date.label }}</label>
          {{ claim_form.final_report_without_missing_docs_date }}
          {% if claim_form.final_report_without_missing_docs_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.final_report_without_missing_docs_date.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.initial_report_with_missing_docs_date.id_for_label }}">{{ claim_form.initial_report_with_missing_docs_date.label }}</label>
          {{ claim_form.initial_report_with_missing_docs_date }}
          {% if claim_form.initial_report_with_missing_docs_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.initial_report_with_missing_docs_date.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.followup_reminder_date.id_for_label }}">{{ claim_form.followup_reminder_date.label }}</label>
          {{ claim_form.followup_reminder_date }}
          {% if claim_form.followup_reminder_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.followup_reminder_date.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-4">
          <label class="form-label" for="{{ claim_form.final_report_submission_date.id_for_label }}">{{ claim_form.final_report_submission_date.label }}</label>
          {{ claim_form.final_report_submission_date }}
          {% if claim_form.final_report_submission_date.errors %}<div class="invalid-feedback d-block">{{ claim_form.final_report_submission_date.errors|join:', ' }}</div>{% endif %}
        </div>
      </div>
    </div>

    <div class="surface-card verification-form-card verification-form-card--invoice-table">
      <div class="verification-form-card__header verification-form-card__header--split verification-form-card__header--editorial">
        <div>
          <h2 class="h5 fw-semibold mb-1">Invoice Rows</h2>
        </div>
        <button type="button" class="btn btn-outline-secondary btn-sm" data-add-invoice-row data-dirty-trigger>
          <i class="bi bi-plus-circle me-1" aria-hidden="true"></i> Add Invoice
        </button>
      </div>

      {% if invoice_formset.non_form_errors %}
        <div class="alert alert-danger" role="alert">{{ invoice_formset.non_form_errors }}</div>
      {% endif %}

      <div class="table-responsive invoice-entry-table-wrap">
        <table class="table table-sm align-middle invoice-entry-table mb-0">
          <thead>
            <tr>
              <th>Goods / Services</th>
              <th>Transaction Type</th>
              <th>Transaction #</th>
              <th>Date</th>
              <th>Line Item</th>
              <th>
                <span class="d-inline-flex align-items-center gap-1">
                  <span>Supplier TRN</span>
                  <a
                    href="https://tax.gov.ae/en/statuscheck.aspx"
                    class="btn btn-outline-secondary btn-sm invoice-entry-help-link"
                    target="_blank"
                    rel="noopener noreferrer"
                    title="Check TRN on the official FTA website"
                    aria-label="Check TRN on the official FTA website"
                  >?</a>
                </span>
              </th>
              <th>Supplier Name</th>
              <th>Plot No.</th>
              <th>TOS</th>
              <th>Total Paid</th>
              <th>VAT Amount</th>
              <th>VAT Approved</th>
              <th>VAT Paid</th>
              <th>Description</th>
              <th>Uploads</th>
              <th></th>
            </tr>
          </thead>
          <tbody data-invoice-rows>
            {% for form in invoice_formset.forms %}
              <tr
                class="invoice-form-row"
                data-saved-invoice-doc-count="{{ form.saved_invoice_document_count|default:0 }}"
                data-saved-proof-doc-count="{{ form.saved_payment_proof_count|default:0 }}"
                data-saved-invoice-documents="{{ form.saved_invoice_documents_json|default:'[]'|escape }}"
                data-saved-proof-documents="{{ form.saved_payment_proof_documents_json|default:'[]'|escape }}"
              >
                {{ form.id }}
                <td data-label="Goods / Services">
                  {{ form.goods_services }}
                  {% if form.goods_services.errors %}<div class="invalid-feedback d-block">{{ form.goods_services.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Transaction Type">
                  {{ form.transaction_type }}
                  {% if form.transaction_type.errors %}<div class="invalid-feedback d-block">{{ form.transaction_type.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Transaction #">
                  {{ form.transaction_number }}
                  {% if form.transaction_number.errors %}<div class="invalid-feedback d-block">{{ form.transaction_number.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Date">
                  {{ form.transaction_date }}
                  {% if form.transaction_date.errors %}<div class="invalid-feedback d-block">{{ form.transaction_date.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Line Item">
                  <span class="invoice-line-item-counter" data-line-item-counter>{{ forloop.counter }}</span>
                </td>
                <td data-label="Supplier TRN">
                  <div class="invoice-supplier-autocomplete" data-supplier-autocomplete-root>
                    {{ form.supplier_trn }}
                    <div class="invoice-supplier-autocomplete__menu d-none" data-supplier-autocomplete-menu></div>
                  </div>
                  {% if form.supplier_trn.errors %}<div class="invalid-feedback d-block">{{ form.supplier_trn.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Supplier Name">
                  <div class="invoice-supplier-autocomplete" data-supplier-autocomplete-root>
                    {{ form.supplier_name }}
                    <div class="invoice-supplier-autocomplete__menu d-none" data-supplier-autocomplete-menu></div>
                  </div>
                  {% if form.supplier_name.errors %}<div class="invalid-feedback d-block">{{ form.supplier_name.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Plot No.">
                  {{ form.plot_number }}
                  {% if form.plot_number.errors %}<div class="invalid-feedback d-block">{{ form.plot_number.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="TOS">
                  {{ form.tos }}
                  {% if form.tos.errors %}<div class="invalid-feedback d-block">{{ form.tos.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Total Paid">
                  {{ form.total_amount_paid }}
                  {% if form.total_amount_paid.errors %}<div class="invalid-feedback d-block">{{ form.total_amount_paid.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="VAT Amount">
                  <input
                    type="text"
                    class="form-control invoice-vat-preview"
                    value="{% if form.instance.pk %}{{ form.instance.vat_amount|floatformat:2 }}{% else %}0.00{% endif %}"
                    readonly
                  >
                </td>
                <td data-label="VAT Approved" class="invoice-entry-table__vat-approved-cell">
                  {{ form.vat_approved }}
                  {% if form.vat_approved.errors %}<div class="invalid-feedback d-block">{{ form.vat_approved.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="VAT Paid">
                  {{ form.vat_paid }}
                  {% if form.vat_paid.errors %}<div class="invalid-feedback d-block">{{ form.vat_paid.errors|join:', ' }}</div>{% endif %}
                </td>
                <td data-label="Description">
                  {{ form.description }}
                  {% if form.description.errors %}<div class="invalid-feedback d-block">{{ form.description.errors|join:', ' }}</div>{% endif %}
                </td>
                <td
                  class="invoice-row-docs"
                  data-label="Uploads"
                  data-saved-invoice-doc-count="{{ form.saved_invoice_document_count|default:0 }}"
                  data-saved-proof-doc-count="{{ form.saved_payment_proof_count|default:0 }}"
                  data-saved-invoice-documents="{{ form.saved_invoice_documents_json|default:'[]'|escape }}"
                  data-saved-proof-documents="{{ form.saved_payment_proof_documents_json|default:'[]'|escape }}"
                >
                  <div class="invoice-row-docs__inputs" aria-hidden="true">
                    {{ form.line_item.as_hidden }}
                    {{ form.invoice_files }}
                    {{ form.payment_proof_files }}
                  </div>
                  <button type="button" class="btn btn-outline-secondary btn-sm" data-open-doc-modal>
                    <i class="bi bi-paperclip me-1" aria-hidden="true"></i>
                    <span class="invoice-row-docs__button-meta">
                      <span data-invoice-doc-count>{{ form.saved_invoice_document_count|default:0 }}</span> invoice
                      <span class="invoice-row-docs__button-divider">|</span>
                      <span data-proof-doc-count>{{ form.saved_payment_proof_count|default:0 }}</span> proof
                    </span>
                  </button>
                  {% if form.invoice_files.errors %}<div class="invalid-feedback d-block mt-2">{{ form.invoice_files.errors|join:', ' }}</div>{% endif %}
                  {% if form.payment_proof_files.errors %}<div class="invalid-feedback d-block mt-2">{{ form.payment_proof_files.errors|join:', ' }}</div>{% endif %}
                </td>
                <td class="invoice-row-actions" data-label="Actions">
                  <div class="d-none">{{ form.DELETE }}</div>
                  <button type="button" class="btn btn-outline-secondary btn-sm" data-delete-invoice-row data-dirty-trigger>Remove</button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="invoice-live-summary" data-invoice-summary>
        <div class="invoice-live-summary__item">
          <p class="invoice-live-summary__label">Active invoices</p>
          <p class="invoice-live-summary__value" data-summary-count>0</p>
        </div>
        <div class="invoice-live-summary__item">
          <p class="invoice-live-summary__label">Total paid</p>
          <p class="invoice-live-summary__value" data-summary-total-paid>0.00</p>
        </div>
        <div class="invoice-live-summary__item">
          <p class="invoice-live-summary__label">VAT amount</p>
          <p class="invoice-live-summary__value" data-summary-vat-amount>0.00</p>
        </div>
        <div class="invoice-live-summary__item">
          <p class="invoice-live-summary__label">VAT approved</p>
          <p class="invoice-live-summary__value" data-summary-vat-approved>0.00</p>
        </div>
        <div class="invoice-live-summary__item">
          <p class="invoice-live-summary__label">VAT paid</p>
          <p class="invoice-live-summary__value" data-summary-vat-paid>0.00</p>
        </div>
      </div>

      <template id="invoice-empty-form-template">
        <tr
          class="invoice-form-row"
          data-saved-invoice-doc-count="0"
          data-saved-proof-doc-count="0"
          data-saved-invoice-documents="[]"
          data-saved-proof-documents="[]"
        >
          {{ invoice_formset.empty_form.id }}
          <td data-label="Goods / Services">{{ invoice_formset.empty_form.goods_services }}</td>
          <td data-label="Transaction Type">{{ invoice_formset.empty_form.transaction_type }}</td>
          <td data-label="Transaction #">{{ invoice_formset.empty_form.transaction_number }}</td>
          <td data-label="Date">{{ invoice_formset.empty_form.transaction_date }}</td>
          <td data-label="Line Item"><span class="invoice-line-item-counter" data-line-item-counter></span></td>
          <td data-label="Supplier TRN">
            <div class="invoice-supplier-autocomplete" data-supplier-autocomplete-root>
              {{ invoice_formset.empty_form.supplier_trn }}
              <div class="invoice-supplier-autocomplete__menu d-none" data-supplier-autocomplete-menu></div>
            </div>
          </td>
          <td data-label="Supplier Name">
            <div class="invoice-supplier-autocomplete" data-supplier-autocomplete-root>
              {{ invoice_formset.empty_form.supplier_name }}
              <div class="invoice-supplier-autocomplete__menu d-none" data-supplier-autocomplete-menu></div>
            </div>
          </td>
          <td data-label="Plot No.">{{ invoice_formset.empty_form.plot_number }}</td>
          <td data-label="TOS">{{ invoice_formset.empty_form.tos }}</td>
          <td data-label="Total Paid">{{ invoice_formset.empty_form.total_amount_paid }}</td>
          <td data-label="VAT Amount"><input type="text" class="form-control invoice-vat-preview" value="0.00" readonly></td>
          <td data-label="VAT Approved" class="invoice-entry-table__vat-approved-cell">{{ invoice_formset.empty_form.vat_approved }}</td>
          <td data-label="VAT Paid">{{ invoice_formset.empty_form.vat_paid }}</td>
          <td data-label="Description">{{ invoice_formset.empty_form.description }}</td>
          <td class="invoice-row-docs" data-label="Uploads" data-saved-invoice-doc-count="0" data-saved-proof-doc-count="0">
            <div class="invoice-row-docs__inputs" aria-hidden="true">
              {{ invoice_formset.empty_form.line_item.as_hidden }}
              {{ invoice_formset.empty_form.invoice_files }}
              {{ invoice_formset.empty_form.payment_proof_files }}
            </div>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-open-doc-modal>
              <i class="bi bi-paperclip me-1" aria-hidden="true"></i>
              <span class="invoice-row-docs__button-meta">
                <span data-invoice-doc-count>0</span> invoice
                <span class="invoice-row-docs__button-divider">|</span>
                <span data-proof-doc-count>0</span> proof
              </span>
            </button>
          </td>
          <td class="invoice-row-actions" data-label="Actions">
            <div class="d-none">{{ invoice_formset.empty_form.DELETE }}</div>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-delete-invoice-row data-dirty-trigger>Remove</button>
          </td>
        </tr>
      </template>
    </div>

    <div class="verification-form-submit-bar row g-3 align-items-center">
      <div class="verification-form-submit-bar__copy col-12 col-lg"></div>
      <div class="verification-form-submit-bar__actions col-12 col-lg-auto">
        <a href="{% if claim %}{% url cancel_url claim.pk %}{% else %}{% url cancel_url %}{% endif %}" class="btn btn-outline-secondary" data-leave-guard>Cancel</a>
        <button type="submit" class="btn btn-outline-dark" name="form_action" value="draft" data-form-submit-control>{{ draft_submit_label }}</button>
        <button type="submit" class="btn btn-brand" name="form_action" value="submit" data-form-submit-control>{{ submit_label }}</button>
      </div>
    </div>
  </form>

  <datalist id="verification-description-options">
    {% for label in description_option_labels %}
      <option value="{{ label }}"></option>
    {% endfor %}
  </datalist>

  <div class="modal fade" id="invoiceDocumentModal" tabindex="-1" aria-labelledby="invoiceDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content border-0 shadow-lg verification-entry-modal">
        <div class="modal-header">
          <div>
            <p class="tiny-label mb-1">Invoice Documents</p>
            <h3 class="h5 mb-0" id="invoiceDocumentModalLabel" data-doc-modal-title>Upload Documents</h3>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="text-muted small mb-3" data-doc-modal-subtitle>Select invoice files and payment proof PDFs for this row before saving the report.</p>
          <div class="row g-3">
            <div class="col-md-6">
              <div class="surface-card invoice-doc-modal-card h-100">
                <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                  <div>
                    <h4 class="h6 fw-semibold mb-1">Invoice Files</h4>
                    <p class="text-muted small mb-0">PDF only</p>
                  </div>
                  <span class="badge rounded-pill text-bg-light border" data-modal-invoice-count>0 selected</span>
                </div>
                <label class="upload-dropzone upload-dropzone--compact" data-dropzone>
                  <input
                    type="file"
                    class="upload-dropzone__input"
                    accept=".pdf"
                    multiple
                    data-max-file-bytes="2097152"
                    data-max-file-message="Each invoice file must be 2 MB or smaller."
                    data-modal-invoice-input
                  >
                  <span class="upload-dropzone__shell">
                    <span class="upload-dropzone__icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>
                    <span class="upload-dropzone__title">Choose invoice files</span>
                    <span class="upload-dropzone__hint">Drop or browse</span>
                    <span class="upload-dropzone__selection" data-file-selection>No files selected</span>
                  </span>
                </label>
                <div class="invoice-doc-modal-list mt-3" data-modal-invoice-list>
                  <p class="text-muted small mb-0">No invoice files saved or selected.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="surface-card invoice-doc-modal-card h-100">
                <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                  <div>
                    <h4 class="h6 fw-semibold mb-1">Payment Proof PDFs</h4>
                    <p class="text-muted small mb-0">PDF only</p>
                  </div>
                  <span class="badge rounded-pill text-bg-light border" data-modal-proof-count>0 selected</span>
                </div>
                <label class="upload-dropzone upload-dropzone--compact" data-dropzone>
                  <input
                    type="file"
                    class="upload-dropzone__input"
                    accept=".pdf"
                    multiple
                    data-max-file-bytes="2097152"
                    data-max-file-message="Each payment proof file must be 2 MB or smaller."
                    data-modal-proof-input
                  >
                  <span class="upload-dropzone__shell">
                    <span class="upload-dropzone__icon"><i class="bi bi-file-earmark-lock2" aria-hidden="true"></i></span>
                    <span class="upload-dropzone__title">Choose payment proofs</span>
                    <span class="upload-dropzone__hint">Drop or browse</span>
                    <span class="upload-dropzone__selection" data-file-selection>No files selected</span>
                  </span>
                </label>
                <div class="invoice-doc-modal-list mt-3" data-modal-proof-list>
                  <p class="text-muted small mb-0">No payment proof files saved or selected.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="alert alert-info border-0 verification-upload-note mt-3 mb-0" role="status">
            <i class="bi bi-filetype-pdf me-2" aria-hidden="true"></i>
            PDF only. Max 2 MB per file.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Done</button>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}