{% extends 'django_forms_workflows/base.html' %}

{% block title %}Approval History - {{ site_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
  /* Improve pagination styling */
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    margin-bottom: 0;
  }

  .dataTables_wrapper .dataTables_info {
    padding-top: 0;
  }

  /* Clean up table controls */
  .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Style the page length selector */
  .form-select-sm {
    border-color: #dee2e6;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .form-select-sm:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }

  /* Improve search input styling */
  #searchContainer .input-group-text {
    border-right: 0;
  }

  #searchContainer input {
    border-left: 0;
  }

  #searchContainer input:focus {
    border-color: #dee2e6;
    box-shadow: none;
  }

  #searchContainer .input-group:focus-within .input-group-text {
    border-color: #86b7fe;
  }

  #searchContainer .input-group:focus-within input {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
</style>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12">

    {# ── Page header ── #}
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h1 class="mb-0"><i class="bi bi-inbox"></i> Approvals</h1>
    </div>

    {# ── Tab navigation ── #}
    <ul class="nav nav-tabs mb-3">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'forms_workflows:approval_inbox' %}">
          <i class="bi bi-hourglass-split me-1"></i>Pending
          <span class="badge bg-primary ms-1">{{ pending_tasks_count }}</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="{% url 'forms_workflows:completed_approvals' %}">
          <i class="bi bi-archive me-1"></i>Approval History
          <span class="badge bg-secondary ms-1">{{ total_count }}</span>
        </a>
      </li>
    </ul>

    <div class="d-flex align-items-center justify-content-end mb-3">
      <span class="text-muted small">
        {% if active_form %}
          Showing {{ submissions|length }} submission{{ submissions|length|pluralize }} in
          <strong>{{ active_category.name }}</strong> &rsaquo; <strong>{{ active_form.name }}</strong>
          &mdash;
          <a href="?category={{ category_slug }}" class="text-decoration-none">clear form filter</a>
        {% elif active_category %}
          Showing {{ submissions|length }} submission{{ submissions|length|pluralize }} in
          <strong>{{ active_category.name }}</strong>
          &mdash;
          <a href="?" class="text-decoration-none">clear filter</a>
        {% else %}
          {{ total_count }} completed submission{{ total_count|pluralize }} total
        {% endif %}
      </span>
    </div>

    {# ── Category filter bar ── #}
    {% if category_counts %}
    <div class="mb-3 d-flex flex-wrap gap-2 align-items-center" role="toolbar" aria-label="Filter by category">
      <span class="text-muted small fw-semibold me-1">Filter:</span>

      <a href="?"
         class="btn btn-sm {% if not category_slug %}btn-primary{% else %}btn-outline-secondary{% endif %}"
         {% if not category_slug %}aria-current="true"{% endif %}>
        All
        <span class="badge {% if not category_slug %}bg-light text-dark{% else %}bg-secondary{% endif %} ms-1">
          {{ total_count }}
        </span>
      </a>

      {% for cat in category_counts %}
      <a href="?category={{ cat.slug }}"
         class="btn btn-sm {% if category_slug == cat.slug %}btn-primary{% else %}btn-outline-secondary{% endif %}"
         {% if category_slug == cat.slug %}aria-current="true"{% endif %}>
        {% if cat.icon %}<i class="bi {{ cat.icon }} me-1"></i>{% endif %}
        {{ cat.name }}
        <span class="badge {% if category_slug == cat.slug %}bg-light text-dark{% else %}bg-secondary{% endif %} ms-1">
          {{ cat.count }}
        </span>
      </a>
      {% endfor %}
    </div>
    {% endif %}

    {# ── Form filter bar (only when a category is active) ── #}
    {% if form_counts %}
    <div class="mb-3 d-flex flex-wrap gap-2 align-items-center ps-3 border-start border-2"
         role="toolbar" aria-label="Filter by form">
      <span class="text-muted small fw-semibold me-1">Form:</span>

      <a href="?category={{ category_slug }}"
         class="btn btn-sm {% if not form_slug %}btn-primary{% else %}btn-outline-secondary{% endif %}"
         {% if not form_slug %}aria-current="true"{% endif %}>
        All
      </a>

      {% for form_item in form_counts %}
      <a href="?category={{ category_slug }}&form={{ form_item.slug }}"
         class="btn btn-sm {% if form_slug == form_item.slug %}btn-primary{% else %}btn-outline-secondary{% endif %}"
         {% if form_slug == form_item.slug %}aria-current="true"{% endif %}>
        {{ form_item.name }}
        <span class="badge {% if form_slug == form_item.slug %}bg-light text-dark{% else %}bg-secondary{% endif %} ms-1">
          {{ form_item.count }}
        </span>
      </a>
      {% endfor %}
    </div>
    {% endif %}

    {# ── Status filter bar with search ── #}
    <div class="mb-3 d-flex flex-wrap gap-2 align-items-center justify-content-between" role="toolbar" aria-label="Filter by status">
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <span class="text-muted small fw-semibold me-1">Status:</span>
        <a href="?{% if category_slug %}category={{ category_slug }}&{% endif %}{% if form_slug %}form={{ form_slug }}&{% endif %}"
           class="btn btn-sm {% if not status_filter %}btn-primary{% else %}btn-outline-secondary{% endif %}">
          All
        </a>
        <a href="?{% if category_slug %}category={{ category_slug }}&{% endif %}{% if form_slug %}form={{ form_slug }}&{% endif %}status=approved"
           class="btn btn-sm {% if status_filter == 'approved' %}btn-success{% else %}btn-outline-success{% endif %}">
          <i class="bi bi-check-circle me-1"></i>Approved
        </a>
        <a href="?{% if category_slug %}category={{ category_slug }}&{% endif %}{% if form_slug %}form={{ form_slug }}&{% endif %}status=rejected"
           class="btn btn-sm {% if status_filter == 'rejected' %}btn-danger{% else %}btn-outline-danger{% endif %}">
          <i class="bi bi-x-circle me-1"></i>Rejected
        </a>
        <a href="?{% if category_slug %}category={{ category_slug }}&{% endif %}{% if form_slug %}form={{ form_slug }}&{% endif %}status=withdrawn"
           class="btn btn-sm {% if status_filter == 'withdrawn' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">
          <i class="bi bi-dash-circle me-1"></i>Withdrawn
        </a>
      </div>
      <div id="searchContainer"></div>
    </div>

    {# ── Bulk export form (wraps the table) ── #}
    {% if any_exportable %}
    <form id="bulkExportForm" method="post" action="{% url 'forms_workflows:bulk_export_submissions' %}" data-no-spinner data-loading-message="Generating Excel…">
      {% csrf_token %}
      <div class="mb-2 d-flex align-items-center gap-2">
        <button type="submit" class="btn btn-sm btn-success" id="exportBtn" disabled>
          <i class="bi bi-file-earmark-spreadsheet me-1"></i>Export Selected to Excel
        </button>
        <span class="text-muted small" id="selectedCount"></span>
      </div>
    {% endif %}

    {# ── Submissions table ── #}
    {% if submissions %}
      <div class="table-responsive">
        <table class="table table-hover" id="completedTable">
          <thead>
            <tr>
              {% if any_exportable %}<th class="text-center" style="width:40px;"><input type="checkbox" id="selectAll" title="Select all exportable"></th>{% endif %}
              {% if not category_slug %}<th>Category</th>{% endif %}
              <th>Form</th>
              <th>Submitter</th>
              <th>Status</th>
              <th>Submitted</th>
              <th>Completed</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for submission in submissions %}
            <tr>
              {% if any_exportable %}
              <td class="text-center">
                {% if submission.form_definition.workflow and submission.form_definition.workflow.allow_bulk_export %}
                  <input type="checkbox" name="submission_ids" value="{{ submission.id }}" class="export-check">
                {% endif %}
              </td>
              {% endif %}
              {% if not category_slug %}
              <td>
                {% with cat=submission.form_definition.category %}
                {% if cat %}
                  {% if cat.icon %}<i class="bi {{ cat.icon }} me-1 text-muted"></i>{% endif %}
                  {{ cat.name }}
                {% else %}
                  <span class="text-muted">—</span>
                {% endif %}
                {% endwith %}
              </td>
              {% endif %}
              <td>{{ submission.form_definition.name }}</td>
              <td>{{ submission.submitter.get_full_name|default:submission.submitter.username }}</td>
              <td>
                {% if submission.status == 'approved' %}
                  <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Approved</span>
                {% elif submission.status == 'rejected' %}
                  <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>Rejected</span>
                {% elif submission.status == 'withdrawn' %}
                  <span class="badge bg-secondary"><i class="bi bi-dash-circle me-1"></i>Withdrawn</span>
                {% elif submission.status == 'pending_approval' %}
                  <span class="badge bg-warning text-dark" title="You have approved your step — waiting on other approvers"><i class="bi bi-hourglass-split me-1"></i>Awaiting Co-Approver</span>
                {% else %}
                  <span class="badge bg-light text-dark">{{ submission.status }}</span>
                {% endif %}
              </td>
              <td>{{ submission.submitted_at|date:"Y-m-d H:i" }}</td>
              <td>
                {% if submission.completed_at %}
                  {{ submission.completed_at|date:"Y-m-d H:i" }}
                {% else %}
                  <span class="text-muted">—</span>
                {% endif %}
              </td>
              <td>
                <a href="{% url 'forms_workflows:submission_detail' submission.id %}" class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-eye"></i> View
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="alert alert-info">
        <i class="bi bi-info-circle"></i>
        {% if active_form %}
          No completed submissions for <strong>{{ active_form.name }}</strong> in <strong>{{ active_category.name }}</strong>.
        {% elif active_category %}
          No completed submissions in <strong>{{ active_category.name }}</strong>.
        {% elif status_filter %}
          No <strong>{{ status_filter }}</strong> submissions found.
        {% else %}
          No completed submissions found in your workflow history.
        {% endif %}
      </div>
    {% endif %}

    {% if any_exportable %}
    </form>
    {% endif %}

  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
    if ($('#completedTable').length) {
        var exportOffset = {% if any_exportable %}1{% else %}0{% endif %};
        var catOffset = {% if not category_slug %}1{% else %}0{% endif %};
        var table = $('#completedTable').DataTable({
            order: [[exportOffset + catOffset + 3, 'desc']],
            columnDefs: [
                { orderable: false, targets: -1 }{% if any_exportable %},
                { orderable: false, targets: 0 }{% endif %}
            ],
            pageLength: 25,
            dom: '<"row"<"col-sm-12"tr>><"row mt-3"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            language: {
                search: '',
                searchPlaceholder: 'Search submissions...',
                emptyTable: 'No completed submissions found.',
                zeroRecords: 'No matching submissions found.',
                info: 'Showing _START_ to _END_ of _TOTAL_ submissions',
                infoEmpty: 'Showing 0 to 0 of 0 submissions',
                infoFiltered: '(filtered from _MAX_ total submissions)',
                paginate: {
                    first: '&laquo;',
                    last: '&raquo;',
                    next: '&rsaquo;',
                    previous: '&lsaquo;'
                }
            }
        });

        // Move search box to the filter row
        var searchBox = $('<div class="input-group input-group-sm" style="max-width: 300px;">' +
            '<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>' +
            '<input type="search" class="form-control form-control-sm" placeholder="Search submissions..." aria-label="Search">' +
            '</div>');

        searchBox.find('input').on('keyup change', function() {
            table.search(this.value).draw();
        });

        $('#searchContainer').append(searchBox);

        // Add page length selector to bottom with improved styling
        var lengthSelect = $('<div class="d-flex align-items-center gap-2 mb-2">' +
            '<label class="mb-0 text-muted small">Show:</label>' +
            '<select class="form-select form-select-sm" style="width: auto;">' +
            '<option value="10">10</option>' +
            '<option value="25" selected>25</option>' +
            '<option value="50">50</option>' +
            '<option value="100">100</option>' +
            '<option value="-1">All</option>' +
            '</select>' +
            '<span class="text-muted small">entries</span>' +
            '</div>');

        lengthSelect.find('select').on('change', function() {
            table.page.len($(this).val()).draw();
        });

        $('.dataTables_info').parent().prepend(lengthSelect);
    }

    // Bulk export checkbox handling
    {% if any_exportable %}
    function updateExportBtn() {
        var checked = $('.export-check:checked').length;
        $('#exportBtn').prop('disabled', checked === 0);
        $('#selectedCount').text(checked > 0 ? checked + ' selected' : '');
    }

    $('#selectAll').on('change', function() {
        var checked = $(this).prop('checked');
        // Only check visible rows (current DataTables page)
        if (table) {
            table.$('.export-check').prop('checked', checked);
        } else {
            $('.export-check').prop('checked', checked);
        }
        updateExportBtn();
    });

    $(document).on('change', '.export-check', function() {
        updateExportBtn();
        // Uncheck "select all" if any row is unchecked
        if (!$(this).prop('checked')) {
            $('#selectAll').prop('checked', false);
        }
    });
    {% endif %}
});
</script>
{% endblock %}