<div class="card rounded-3 border-light mt-3" style="background:#fefefe;">
  <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center p-2">
    <h6 class="mb-0 fw-bold text-dark">Add Verification Issue</h6>
    <i class="fas fa-plus-circle text-muted"></i>
  </div>

  <div class="card-body p-2">

    <!-- ADD ISSUE FORM -->
    <%= form_with model: CustomerVerificationIssue.new, url: add_verification_issue_admin_portal_customer_path(@customer), local: true do |f| %>
      <div class="mb-2">
        <%= f.label :title, class: "form-label small fw-semibold" %>
        <%= f.text_field :title, class: "form-control form-control-sm rounded-pill" %>
      </div>

      <div class="mb-2">
        <%= f.label :description, class: "form-label small fw-semibold" %>
        <%= f.text_area :description, class: "form-control form-control-sm rounded-2", rows: 2 %>
      </div>

      <div class="mb-2">
        <%= f.label :document_id, "Related Document (optional)", class: "form-label small fw-semibold" %>
        <%= f.collection_select :document_id, @all_documents_for_issue, :id,
              ->(d) { "#{d.title} (#{d.documentable_type || 'Customer'})" },
              { include_blank: true },
              { class: "form-select form-select-sm rounded-pill w-100" } %>
      </div>
      <%= f.submit "Add Issue", data: { turbo: false }, class: "btn btn-danger btn-sm rounded-pill" %>
    <% end %>
  </div>
</div>

<!-- EXISTING ISSUES -->
<h6 class="mt-3 mb-2 fw-semibold">Existing Verification Issues</h6>

<% if @customer.customer_verification_issues.any? %>
  <div class="list-group list-group-flush">

    <% @customer.customer_verification_issues.each do |issue| %>
      <div class="list-group-item d-flex justify-content-between align-items-start p-2 rounded-2 mb-1" style="background:#fcfcfc; border:1px solid #eee;">

        <!-- Left: Issue Details -->
        <div class="flex-grow-1 small">
          <strong><%= issue.title %>:</strong> <%= issue.description %>
          <% if issue.document&.file&.attached? %>
            <span class="text-primary fw-semibold">
              (<%= link_to "View", rails_blob_path(issue.document.file, disposition: "attachment"), target: "_blank" %>)
            </span>
          <% end %>

          <% if issue.admin_rejected? && issue.admin_note.present? %>
            <p class="text-danger fst-italic mb-0" style="font-size:0.8rem;">Note: <%= issue.admin_note %></p>
          <% end %>
        </div>

        <!-- Right: Status / Reject -->
        <div class="d-flex flex-column align-items-end gap-1" style="min-width:120px;">
          <% if issue.resolved? && !issue.admin_rejected? %>
            <span class="badge bg-success rounded-pill px-2 py-1" style="font-size:0.75rem;">✅ Resolved</span>

            <%= form_with url: reject_admin_portal_customer_customer_verification_issue_path(@customer, issue),
                          method: :patch,
                          local: true do |f| %>
              <%= f.text_area :admin_note, placeholder: "Reject reason", class: "form-control form-control-sm rounded-2 mb-1", rows: 1 %>
              <%= f.submit "Reject", data: { turbo: false }, class: "btn btn-sm btn-danger rounded-pill w-100" %>
            <% end %>

          <% elsif issue.admin_rejected? %>
            <span class="badge bg-danger rounded-pill px-2 py-1" style="font-size:0.75rem;">⚠️ Rejected</span>
          <% else %>
            <span class="badge bg-warning text-dark rounded-pill px-2 py-1" style="font-size:0.75rem;">❌ Pending</span>
          <% end %>
        </div>

      </div>
    <% end %>
  </div>
<% else %>
  <p class="text-muted fst-italic small mb-0">No verification issues recorded for this customer.</p>
<% end %>

