{% extends 'esign/base.html' %}
{% load static %}
{% block content %}

<div class="container-fluid">
  <div class="row justify-content-center mb-4">
    <div class="col-12">
      <div class="table-responsive">
      <!-- Nav tabs -->
      <nav class="nav nav-pills nav-justified nav-tabs" id="signature-status-nav-tab" role="tablist">
        <button class="nav-link active rounded-bottom-0 py-2" id="nav-document-drafts-tab" data-bs-toggle="tab" data-bs-target="#nav-document-drafts" type="button" role="tab" aria-controls="nav-document-drafts" aria-selected="true">
          <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-pencil-alt me-3 fs-20 text-warning"></i>
            <div class="text-start"><span class="fs-18 fw-semibold text-warning">Drafts</span> <small class="d-block">{{ drafts.paginator.count }} Document</small></div>
          </div>
        </button>

        <button class="nav-link rounded-bottom-0 py-2" id="nav-document-action-required-tab" data-bs-toggle="tab" data-bs-target="#nav-document-action-required" type="button" role="tab" aria-controls="nav-document-action-required" aria-selected="false">
          <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-info-circle me-3 fs-20 text-primary"></i>
            <div class="text-start"><span class="fs-18 fw-semibold text-primary">Action Required</span> <small class="d-block">{{ action_required.paginator.count }} Document</small></div>
          </div>
        </button>

        <button class="nav-link rounded-bottom-0 py-2" id="nav-waiting-for-others-tab" data-bs-toggle="tab" data-bs-target="#nav-waiting-for-others" type="button" role="tab" aria-controls="nav-waiting-for-others" aria-selected="false">
          <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-user-friends me-3 fs-20 text-info"></i>
            <div class="text-start"><span class="fs-18 fw-semibold text-info">Waiting for Others</span> <small class="d-block">{{ waiting_for_others.paginator.count }} Document</small></div>
          </div>
        </button>

        <button class="nav-link rounded-bottom-0 py-2" id="nav-document-finalized-tab" data-bs-toggle="tab" data-bs-target="#nav-document-finalized" type="button" role="tab" aria-controls="nav-document-finalized" aria-selected="false">
          <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-check-circle me-3 fs-20 text-success"></i>
            <div class="text-start"><span class="fs-18 fw-semibold text-success">Finalized</span> <small class="d-block">{{ finalized.paginator.count }} Document</small></div>
          </div>
        </button>
      </nav>
    </div>
      <div class="tab-content border bg-light rounded-bottom" id="nav-tabContent">
        <!-- ----------------- DRAFTS TAB ----------------- -->
        <div class="tab-pane fade active show" id="nav-document-drafts" role="tabpanel" aria-labelledby="nav-document-drafts-tab">
          <div class="card mb-0">
            <div class="card-header">
              <div class="card border-0 mb-0 shadow-none">
                <!-- Drafts filter form -->
                <form class="row align-items-center filter-form" method="get" data-tab="document-drafts">
                  <input type="hidden" name="active_tab" value="document-drafts">
                  <!-- <div class="col-auto">
                    <input type="text" name="drafts_doc_id" placeholder="Doc ID" class="form-control" value="{{ drafts_filters.doc_id }}">
                  </div> -->
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                    <input type="text" name="drafts_file_name" placeholder="Document Title" class="form-control" value="{{ drafts_filters.file_name }}">
                  </div>
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                   <!--  <input type="text" name="drafts_category" placeholder="Category" class="form-control" value="{{ drafts_filters.category }}"> -->
                    <select name="drafts_category" id="drafts_category" class="form-select">
    <option value="">Select Category</option>
    <option value="employment" {% if drafts_filters.category == "employment" %}selected{% endif %}>Employment / HR</option>
    <option value="legal" {% if drafts_filters.category == "legal" %}selected{% endif %}>Legal / Compliance</option>
    <option value="finance" {% if drafts_filters.category == "finance" %}selected{% endif %}>Finance / Accounting</option>
    <option value="sales" {% if drafts_filters.category == "sales" %}selected{% endif %}>Sales / Marketing</option>
    <option value="procurement" {% if drafts_filters.category == "procurement" %}selected{% endif %}>Procurement / Operations</option>
    <option value="government" {% if drafts_filters.category == "government" %}selected{% endif %}>Government / Administrative</option>
    <option value="education" {% if drafts_filters.category == "education" %}selected{% endif %}>Education / Training</option>
    <option value="healthcare" {% if drafts_filters.category == "healthcare" %}selected{% endif %}>Healthcare / Medical</option>
    <option value="it" {% if drafts_filters.category == "it" %}selected{% endif %}>IT / Software</option>
    <option value="misc" {% if drafts_filters.category == "misc" %}selected{% endif %}>Miscellaneous / Personal</option>
  </select>

                  </div>
                 
                  <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Search</button>
                  </div>
                  <div class="col-auto">
                    <button type="button" class="btn btn-outline-secondary btn-clear">Clear</button>
                  </div>
                </form>
              </div>
            </div>

            <div class="card-body pt-0">
              <div class="table-responsive">
                <table class="table mb-3 table-centered border-bottom table-hover">
                  <thead class="table-light">
                    <tr>
                      <th>S. No.</th><th>Document Title</th><th>Category</th><th>Created at</th><th>Status</th><th>Document Type</th><th class="text-end">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for doc in drafts %}
                      <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ doc.title }}</td>
                        <td>{{ doc.category }}</td>
                       
                        <td>{{ doc.created_at|date:"M d, Y H:i" }}</td>
                        <td>{{ doc.status|title }}</td>
                        <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
                        <td style="width: 200px;" class="text-end">
                          <a href="{% url 'document_detail' doc.id %}" class="btn btn-sm btn-success me-0 me-md-1"><i class="fas fa-edit"></i></a>
                          <a href="{{ doc.file.url }}" target="_blank" class="btn btn-sm btn-secondary me-0 me-md-1"><i class="fas fa-eye"></i></a>
                          <a href="{{ doc.file.url }}" class="btn btn-sm btn-primary me-0 me-md-" download><i class="fas fa-download"></i></a>
                          <form method="POST" action="{% url 'delete_document' doc.id %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this document?');">
                              <i class="fas fa-trash-alt"></i>
                            </button>
                          </form>
                        </td>
                      </tr>
                    {% empty %}
                      <tr><td colspan="9" class="text-center">No Drafts found.</td></tr>
                    {% endfor %}
                  </tbody>
                </table>

                

              </div>
              <!-- pagination (kept same logic) -->
                <div class="row align-items-center mt-3">
                  <div class="col"><div class="datatable-info">Showing {{ drafts.start_index }} to {{ drafts.end_index }} of {{ drafts.paginator.count }} entries</div></div>
                  <div class="col-auto">
                    <nav aria-label="Page navigation">
                      <ul class="pagination justify-content-end mb-0">
                        {% if drafts.has_previous %}
                          <li class="page-item"><a class="page-link" href="?active_tab=document-drafts&drafts_page={{ drafts.previous_page_number }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        {% else %}
                          <li class="page-item disabled"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        {% endif %}
                        {% for num in drafts.paginator.page_range %}
                          {% if drafts.number == num %}
                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                          {% else %}
                            <li class="page-item"><a class="page-link" href="?active_tab=document-drafts&drafts_page={{ num }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}">{{ num }}</a></li>
                          {% endif %}
                        {% endfor %}
                        {% if drafts.has_next %}
                          <li class="page-item"><a class="page-link" href="?active_tab=document-drafts&drafts_page={{ drafts.next_page_number }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        {% else %}
                          <li class="page-item disabled"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        {% endif %}
                      </ul>
                    </nav>
                  </div>
                </div>
            </div>
          </div>
        </div>

        <!-- ----------------- ACTION REQUIRED TAB ----------------- -->
        <div class="tab-pane fade" id="nav-document-action-required" role="tabpanel" aria-labelledby="nav-document-action-required-tab">
          <div class="card mb-0">
            <div class="card-header">
              <div class="card border-0 mb-0 shadow-none">
                <form class="row align-items-center filter-form" method="get" data-tab="document-action-required" id="actionFilterForm">
                  <input type="hidden" name="active_tab" value="document-action-required">
                  <div class="col-12 col-md-auto mb-2 mb-md-0"><input type="text" name="action_file_name" placeholder="Document Title" class="form-control" value="{{ action_filters.file_name }}"></div>
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                    <!-- <input type="text" name="action_category" placeholder="Category" class="form-control" value="{{ action_filters.category }}"> -->
                    <select name="action_category" id="action_category" class="form-select">
    <option value="">Select Category</option>
    <option value="employment" {% if action_filters.category == "employment" %}selected{% endif %}>Employment / HR</option>
    <option value="legal" {% if action_filters.category == "legal" %}selected{% endif %}>Legal / Compliance</option>
    <option value="finance" {% if action_filters.category == "finance" %}selected{% endif %}>Finance / Accounting</option>
    <option value="sales" {% if action_filters.category == "sales" %}selected{% endif %}>Sales / Marketing</option>
    <option value="procurement" {% if action_filters.category == "procurement" %}selected{% endif %}>Procurement / Operations</option>
    <option value="government" {% if action_filters.category == "government" %}selected{% endif %}>Government / Administrative</option>
    <option value="education" {% if action_filters.category == "education" %}selected{% endif %}>Education / Training</option>
    <option value="healthcare" {% if action_filters.category == "healthcare" %}selected{% endif %}>Healthcare / Medical</option>
    <option value="it" {% if action_filters.category == "it" %}selected{% endif %}>IT / Software</option>
    <option value="misc" {% if action_filters.category == "misc" %}selected{% endif %}>Miscellaneous / Personal</option>
  </select>                  </div>

                 
                  <div class="col-auto"><button type="submit" class="btn btn-primary">Search</button></div>
                  <div class="col-auto"><button type="button" class="btn btn-outline-secondary btn-clear">Clear</button></div>
                </form>
              </div>
            </div>

            <div class="card-body pt-0">
              <div class="table-responsive">
                <table class="table mb-3 table-centered border-bottom table-hover">
                  <thead class="table-light">
                    <tr>
                      <th>S. No.</th><th>Document Title</th><th>Category</th><th>Created at</th><th>Status</th><th>Document Type</th><th class="text-end">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for flow in action_required %}
                      <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ flow.document.title }}</td>
                        <td>{{ flow.document.category|title }}</td>
                        <!-- <td>{{ flow.document.owner.get_full_name }}</td> -->
                        <td>{{ flow.document.created_at|date:"M d, Y H:i" }}</td>
                        <td>{{ flow.document.status|title }}</td>
                        <td>{{ flow.document.file.url|slice:"-3:"|upper }}</td>
                        <td class="text-end">
                          <a href="{{ flow.document.file.url }}" class="btn btn-sm btn-info me-1 mb-2 mb-md-0" target="_blank" title="View Original File"><i class="fas fa-eye"></i></a>
                          <a href="{{ flow.document.file.url }}" class="btn btn-sm btn-primary mb-2 mb-md-0" download><i class="fas fa-download"></i></a>
                          <form method="POST" action="{% url 'delete_document' flow.document.id %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?');"><i class="fas fa-trash-alt"></i></button>
                          </form>
                        </td>
                      </tr>
                    {% empty %}
                      <tr><td colspan="9" class="text-center">No Action Required documents found.</td></tr>
                    {% endfor %}
                  </tbody>
                </table>

                

              </div>
              <div class="row align-items-center mt-3">
                  <div class="col"><div class="datatable-info">Showing {{ action_required.start_index }} to {{ action_required.end_index }} of {{ action_required.paginator.count }} entries</div></div>
                  <div class="col-auto">
                    <nav aria-label="Page navigation example">
                      <ul class="pagination justify-content-end mb-0">
                        {% if action_required.has_previous %}
                          <li class="page-item"><a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        {% else %}
                          <li class="page-item disabled"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        {% endif %}
                        {% for num in action_required.paginator.page_range %}
                          {% if action_required.number == num %}
                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                          {% else %}
                            <li class="page-item"><a class="page-link" href="?active_tab=document-action-required&action_page={{ num }}">{{ num }}</a></li>
                          {% endif %}
                        {% endfor %}
                        {% if action_required.has_next %}
                          <li class="page-item"><a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        {% else %}
                          <li class="page-item disabled"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        {% endif %}
                      </ul>
                    </nav>
                  </div>
                </div>
            </div>
          </div>
        </div>

        <!-- ----------------- WAITING FOR OTHERS TAB ----------------- -->
        <div class="tab-pane fade" id="nav-waiting-for-others" role="tabpanel" aria-labelledby="nav-waiting-for-others-tab">
          <div class="card mb-0">
            <div class="card-header">
              <div class="card border-0 mb-0 shadow-none">
                <form class="row align-items-center filter-form" method="get" data-tab="waiting-for-others">
                  <input type="hidden" name="active_tab" value="waiting-for-others">
                 
                  <div class="col-12 col-md-auto mb-2 mb-md-0"><input type="text" name="waiting_file_name" placeholder="Document Title" class="form-control" value="{{ waiting_filters.file_name }}"></div>
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                    <!-- <input type="text" name="waiting_category" placeholder="Category" class="form-control" value="{{ waiting_filters.category }}"> -->
                   <select name="waiting_category" id="waiting_category" class="form-select">
    <option value="">Select Category</option>
    <option value="employment" {% if waiting_filters.category == "employment" %}selected{% endif %}>Employment / HR</option>
    <option value="legal" {% if waiting_filters.category == "legal" %}selected{% endif %}>Legal / Compliance</option>
    <option value="finance" {% if waiting_filters.category == "finance" %}selected{% endif %}>Finance / Accounting</option>
    <option value="sales" {% if waiting_filters.category == "sales" %}selected{% endif %}>Sales / Marketing</option>
    <option value="procurement" {% if waiting_filters.category == "procurement" %}selected{% endif %}>Procurement / Operations</option>
    <option value="government" {% if waiting_filters.category == "government" %}selected{% endif %}>Government / Administrative</option>
    <option value="education" {% if waiting_filters.category == "education" %}selected{% endif %}>Education / Training</option>
    <option value="healthcare" {% if waiting_filters.category == "healthcare" %}selected{% endif %}>Healthcare / Medical</option>
    <option value="it" {% if waiting_filters.category == "it" %}selected{% endif %}>IT / Software</option>
    <option value="misc" {% if waiting_filters.category == "misc" %}selected{% endif %}>Miscellaneous / Personal</option>
  </select>       </div>

                 
                  <div class="col-auto"><button type="submit" class="btn btn-primary">Search</button></div>
                  <div class="col-auto"><button type="button" class="btn btn-outline-secondary btn-clear">Clear</button></div>
                </form>
              </div>
            </div>

            <div class="card-body pt-0">
              <div class="table-responsive">
                <table class="table mb-3 table-centered border-bottom table-hover">
                  <thead class="table-light">
                    <tr>
                      <th>S. No.</th><th>Document Title</th><th>Category</th><th>Signers</th><th>Created at</th><th>Status</th><th>Document Type</th><th class="text-end">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for doc in waiting_for_others %}
                      <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><span class="rounded-circle thumb-md me-1 d-inline"></span>{{ doc.title }}</td>
                        <td>{{ doc.category }}</td>
                       <td>
  <div class="d-flex justify-content-center align-items-center">
    {% for signer in doc.sign_flow.all|slice:":3" %}
      <div class="position-relative" style="margin-left: {% if not forloop.first %}-10px{% else %}0{% endif %};">
        <div class="thumb-md rounded-circle d-flex justify-content-center align-items-center text-white fw-bold" 
             style="background-color:#0d6efd; border:2px solid #fff;"
             data-bs-toggle="tooltip" 
             title="{{ signer.recipient_email }}">
          {{ signer.recipient_email|slice:":1"|upper }}
        </div>
      </div>
    {% endfor %}
    {% if doc.sign_flow.count > 3 %}
      <div class="position-relative ms-1">
        <span class="thumb-md shadow-sm d-flex justify-content-center align-items-center bg-info-subtle rounded-circle fw-semibold fs-6 border border-white"
              data-bs-toggle="modal"
              data-bs-target="#moreSignersModal-{{ doc.id }}">
          +{{ doc.sign_flow.count|add:"-3" }}
        </span>
      </div>
    {% endif %}
  </div>
</td>
{% if doc.sign_flow.count > 3 %}
<div class="modal fade" id="moreSignersModal-{{ doc.id }}" tabindex="-1" aria-labelledby="moreSignersModalLabel-{{ doc.id }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="moreSignersModalLabel-{{ doc.id }}">Additional Signers</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          {% for signer in doc.sign_flow.all|slice:"3:" %}
            <li class="list-group-item">{{ signer.recipient_email }}</li>
          {% endfor %}
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}

                        <td>{{ doc.created_at|date:"M d, Y H:i" }}</td>
                        <td class="text-info fw-bold">In Progress</td>
                        <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
                        <td class="text-end">
    <!-- Download Dropdown -->
    <div class="dropdown d-inline">
        <button class="dropdown-toggle arrow-none btn btn-success btn-sm" 
                type="button" 
                id="downloadMenu{{ doc.pk }}" 
                data-bs-toggle="dropdown" 
                aria-expanded="false">
            <i class="fas fa-download"></i>
        </button>

        <ul class="dropdown-menu p-3" aria-labelledby="downloadMenu{{ doc.pk }}" style="min-width: 250px;">
            <li>
                <form method="post" action="{% url 'download_document_files' doc.pk %}">
                    {% csrf_token %}
                    
                    <!-- Download All Signed Files -->
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="all_signed" name="download_options" id="allSigned{{ doc.pk }}">
                        <label class="form-check-label" for="allSigned{{ doc.pk }}">Download All Signed Files</label>
                    </div>

                    <!-- Download Original Document -->
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="original" name="download_options" id="original{{ doc.pk }}">
                        <label class="form-check-label" for="original{{ doc.pk }}">Download Original Document</label>
                    </div>

                    <hr class="my-2">

                    <!-- Recipient Section -->
                    <p class="mb-1"><strong>Or select recipients:</strong></p>
                    {% for signer in doc.sign_flow.all %}
                        {% if signer.is_signed %}
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="checkbox" value="{{ signer.pk }}" name="recipient_ids" id="recipient{{ signer.pk }}">
                                <label class="form-check-label" for="recipient{{ signer.pk }}">{{ signer.recipient_email }}</label>
                            </div>
                        {% endif %}
                    {% endfor %}

                    <div class="mt-2">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="fas fa-download me-1"></i> Download Selected
                        </button>
                    </div>
                </form>
            </li>
        </ul>
    </div>

    <!-- Delete Button -->
    <form method="post" action="{% url 'delete_document' doc.pk %}" 
          class="d-inline" 
          onsubmit="return confirm('Are you sure you want to delete this document?');">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm ms-1">
            <i class="fas fa-trash-alt"></i>
        </button>
    </form>
</td>

                      </tr>
                    {% empty %}
                      <tr><td colspan="9" class="text-center">No documents waiting for others.</td></tr>
                    {% endfor %}
                  </tbody>
                </table>

                

                
              </div>
              <!-- pagination placeholder (reuse your current pagination pattern if needed) -->
                <div class="row align-items-center mt-3">
  <div class="col">
    <div class="datatable-info">
      Showing {{ waiting_for_others.start_index }} to {{ waiting_for_others.end_index }}
      of {{ waiting_for_others.paginator.count }} entries
    </div>
  </div>
  <div class="col-auto">
    <nav aria-label="Page navigation">
      <ul class="pagination justify-content-end mb-0">
        {% if waiting_for_others.has_previous %}
          <li class="page-item">
            <a class="page-link"
               href="?active_tab=document-waiting-for-others
               &waiting_page={{ waiting_for_others.previous_page_number }}
               &waiting_doc_id={{ waiting_filters.doc_id }}
               &waiting_file_name={{ waiting_filters.file_name }}
               &waiting_category={{ waiting_filters.category }}
               &waiting_status={{ waiting_filters.status }}"
               aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
        {% else %}
          <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
          </li>
        {% endif %}

        {% for num in waiting_for_others.paginator.page_range %}
          {% if waiting_for_others.number == num %}
            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
          {% else %}
            <li class="page-item">
              <a class="page-link"
                 href="?active_tab=document-waiting-for-others
                 &waiting_page={{ num }}
                 &waiting_doc_id={{ waiting_filters.doc_id }}
                 &waiting_file_name={{ waiting_filters.file_name }}
                 &waiting_category={{ waiting_filters.category }}
                 &waiting_status={{ waiting_filters.status }}">
                 {{ num }}
              </a>
            </li>
          {% endif %}
        {% endfor %}

        {% if waiting_for_others.has_next %}
          <li class="page-item">
            <a class="page-link"
               href="?active_tab=document-waiting-for-others
               &waiting_page={{ waiting_for_others.next_page_number }}
               &waiting_doc_id={{ waiting_filters.doc_id }}
               &waiting_file_name={{ waiting_filters.file_name }}
               &waiting_category={{ waiting_filters.category }}
               &waiting_status={{ waiting_filters.status }}"
               aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        {% else %}
          <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
          </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
            </div>
          </div>
        </div>

        <!-- ----------------- FINALIZED TAB ----------------- -->
        <div class="tab-pane fade" id="nav-document-finalized" role="tabpanel" aria-labelledby="nav-document-finalized-tab">
          <div class="card mb-0">
            <div class="card-header">
              <div class="card border-0 mb-0 shadow-none">
                <form class="row align-items-center filter-form" method="get" data-tab="document-finalized">
                  <input type="hidden" name="active_tab" value="document-finalized">
                  <div class="col-12 col-md-auto mb-2 mb-md-0"><input type="text" name="finalized_file_name" placeholder="Document Title" class="form-control" value="{{ finalized_filters.file_name }}"></div>
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                    <!-- <input type="text" name="finalized_category" placeholder="Category" class="form-control" value="{{ finalized_filters.category }}"> -->

                      <select name="finalized_filters" id="finalized_filters" class="form-control">
    <option value="">Select Category</option>
    <option value="employment" {% if finalized_filters.category == "employment" %}selected{% endif %}>Employment / HR</option>
    <option value="legal" {% if finalized_filters.category == "legal" %}selected{% endif %}>Legal / Compliance</option>
    <option value="finance" {% if finalized_filters.category == "finance" %}selected{% endif %}>Finance / Accounting</option>
    <option value="sales" {% if finalized_filters.category == "sales" %}selected{% endif %}>Sales / Marketing</option>
    <option value="procurement" {% if finalized_filters.category == "procurement" %}selected{% endif %}>Procurement / Operations</option>
    <option value="government" {% if finalized_filters.category == "government" %}selected{% endif %}>Government / Administrative</option>
    <option value="education" {% if finalized_filters.category == "education" %}selected{% endif %}>Education / Training</option>
    <option value="healthcare" {% if finalized_filters.category == "healthcare" %}selected{% endif %}>Healthcare / Medical</option>
    <option value="it" {% if finalized_filters.category == "it" %}selected{% endif %}>IT / Software</option>
    <option value="misc" {% if finalized_filters.category == "misc" %}selected{% endif %}>Miscellaneous / Personal</option>
  </select>   
                  </div>
                  <div class="col-12 col-md-auto mb-2 mb-md-0">
                    <!-- <input type="text" name="finalized_status" placeholder="Status" class="form-control" value="{{ finalized_filters.status }}"> -->
                     <select name="finalized_status" id="finalized_status" class="form-select">
    <option value="">Select Status</option>
    <option value="Pending" {% if finalized_filters.status == "Pending" %}selected{% endif %}>Pending</option>
    <option value="Signed" {% if finalized_filters.status == "Signed" %}selected{% endif %}>Signed</option>
</select>
                  </div>
                  <div class="col-auto"><button type="submit" class="btn btn-primary">Search</button></div>
                  <div class="col-auto"><button type="button" class="btn btn-outline-secondary btn-clear">Clear</button></div>
                </form>
              </div>
            </div>

            <div class="card-body pt-0">
              <div class="table-responsive">
                <table class="table mb-3 table-centered border-bottom table-hover">
                  <thead class="table-light">
                    <tr><th>S. No.</th><th>Document Title</th><th>Category</th><th>Signers</th><th>Created at</th><th>Status</th><th>Document Type</th><th class="text-end">Action</th></tr>
                  </thead>
                  <tbody>
                    {% for doc in finalized %}
                      <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ doc.title }}</td>
                        <td>{{ doc.category|title }}</td>
                        <style>
                          .avatar-wrapper {
    position: relative;
    display: inline-block;
}

.avatar-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #0d6efd; /* blue background */
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.avatar-circle:hover {
    transform: scale(1.1);
}

/* Hover image */
.avatar-hover-image {
    display: none;
    position: absolute;
    top: -5px;
    left: 40px; /* adjust based on your layout */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.avatar-wrapper:hover .avatar-hover-image {
    display: block;
}

                        </style>
<td>
  {% for signer in doc.sign_flow.all %}
    {% if signer.is_signed %}
      <div class="avatar-wrapper" style="display:inline-block; position:relative; margin-right:5px;">
        <div class="avatar-circle" title="{{ signer.recipient_email }}">
          {{ signer.recipient_email|slice:":1"|upper }}
        </div>
        {% if signer.profile_image %}
          <img src="{{ signer.profile_image.url }}" class="avatar-hover-image" alt="{{ signer.recipient_email }}">
        {% endif %}
      </div>
    {% endif %}
  {% endfor %}
</td>
                        <td>{{doc.created_at}}</td>
                        <td>{{ doc.status|title }}</td>
                        <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
                        <td class="text-end">
                          {% with merged=doc.sign_flow.first.merged_file %}
                            {% if merged %}
                              <a href="{{ doc.file.url }}" class="btn btn-sm btn-info me-0 me-md-1" target="_blank" title="View Original File"><i class="fas fa-eye"></i></a>
                              <a href="{{ merged.url }}" class="btn btn-sm btn-primary" download title="Download Final Signed File"><i class="fas fa-download"></i></a>
                            {% else %}
                              <a href="{{ doc.file.url }}" class="btn btn-sm btn-info me-0 me-md-1" target="_blank" title="View Original File"><i class="fas fa-eye"></i></a>
                              <a href="{{ doc.file.url }}" class="btn btn-sm btn-primary" download title="Download Original File"><i class="fas fa-download"></i></a>
                            {% endif %}
                          {% endwith %}
                        </td>
                      </tr>
                    {% empty %}
                      <tr><td colspan="8" class="text-center">No finalized documents.</td></tr>
                    {% endfor %}
                  </tbody>
                  
                </table>
              </div>
              
              <div class="row align-items-center mt-3">
  <div class="col">
    <div class="datatable-info">
      Showing {{ finalized.start_index }} to {{ finalized.end_index }}
      of {{ finalized.paginator.count }} entries
    </div>
  </div>
  <div class="col-auto">
    <nav aria-label="Page navigation">
      <ul class="pagination justify-content-end mb-0">
        {% if finalized.has_previous %}
          <li class="page-item">
            <a class="page-link"
               href="?active_tab=document-finalized
               &finalized_page={{ finalized.previous_page_number }}
               &finalized_doc_id={{ finalized_filters.doc_id }}
               &finalized_file_name={{ finalized_filters.file_name }}
               &finalized_category={{ finalized_filters.category }}
               &finalized_status={{ finalized_filters.status }}"
               aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
        {% else %}
          <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
          </li>
        {% endif %}

        {% for num in finalized.paginator.page_range %}
          {% if finalized.number == num %}
            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
          {% else %}
            <li class="page-item">
              <a class="page-link"
                 href="?active_tab=document-finalized
                 &finalized_page={{ num }}
                 &finalized_doc_id={{ finalized_filters.doc_id }}
                 &finalized_file_name={{ finalized_filters.file_name }}
                 &finalized_category={{ finalized_filters.category }}
                 &finalized_status={{ finalized_filters.status }}">
                 {{ num }}
              </a>
            </li>
          {% endif %}
        {% endfor %}

        {% if finalized.has_next %}
          <li class="page-item">
            <a class="page-link"
               href="?active_tab=document-finalized
               &finalized_page={{ finalized.next_page_number }}
               &finalized_doc_id={{ finalized_filters.doc_id }}
               &finalized_file_name={{ finalized_filters.file_name }}
               &finalized_category={{ finalized_filters.category }}
               &finalized_status={{ finalized_filters.status }}"
               aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        {% else %}
          <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
          </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
            </div>
            
          </div>
        </div>


        

      </div> <!-- tab-content -->
    </div> <!-- col -->
  </div> <!-- row -->
</div> <!-- container -->

<!-- ====================== OPTIMIZED JS ====================== -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const tabNav = document.getElementById('signature-status-nav-tab');
  const tabButtons = tabNav ? tabNav.querySelectorAll('button[data-bs-target]') : [];
  const urlParams = new URLSearchParams(window.location.search);
  const initialActive = urlParams.get('active_tab');
  // Show active tab from URL if present
  if (initialActive) {
    const trigger = document.querySelector(`#signature-status-nav-tab button[data-bs-target="#nav-${initialActive}"]`);
    if (trigger) new bootstrap.Tab(trigger).show();
  }

  // When user switches tab, ensure URL reflects active_tab (so refresh keeps it)
  tabButtons.forEach(btn => {
    btn.addEventListener('shown.bs.tab', function (e) {
      const targetId = e.target.getAttribute('data-bs-target') || '';
      const activeTab = targetId.replace('#nav-', '');
      const url = new URL(window.location.href);
      url.searchParams.set('active_tab', activeTab);
      // remove page-specific params if you want to default page on tab change (optional)
      // url.searchParams.delete('page'); // if you use page param name same for all tabs
      history.replaceState({}, '', url.toString());
    });
  });

  // Clear button behavior (delegated): clear only the form fields and redirect to URL with only active_tab
  document.querySelectorAll('.btn-clear').forEach(btn => {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      const form = this.closest('form.filter-form');
      if (!form) return;

      // Reset only inputs in this form
      form.querySelectorAll('input[type="text"], input[type="number"], select').forEach(i => i.value = '');

      // Keep only active_tab in URL (if present)
      const url = new URL(window.location.href);
      const activeTab = url.searchParams.get('active_tab');

      url.search = '';
      if (activeTab) url.searchParams.set('active_tab', activeTab);

      // redirect to cleaned url (so backend returns fresh unfiltered results)
      window.location.href = url.toString();
    });
  });

  // Optional: reset all filter forms when user manually switches tab (keeps UX clean)
  // NOTE: you already keep fields per-tab, so this is optional:
  /*
  tabButtons.forEach(btn => {
    btn.addEventListener('shown.bs.tab', () => {
      document.querySelectorAll('.filter-form').forEach(f => f.reset());
    });
  });
  */

  // Make Enter submit the specific form (works by default for inputs inside form)
  // Small UX: prevent double submit if someone presses Enter in a field while JS redirection in progress
  document.querySelectorAll('.filter-form').forEach(form => {
    form.addEventListener('submit', () => {
      // show small spinner on submit if you want (not implemented here)
    });
  });

  // Small enhancement: keep each form's 'active_tab' input in sync (if you update active_tab via JS)
  // (not strictly necessary because each form already has hidden input)
});
</script>

{% endblock %}