{% extends "pos/base.html" %}
{% load static %}

{% block title %}Staff List{% endblock %}
{% block heading %}Staff Members{% endblock %}

{% block stylesheets %}
<style>
  .filter-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  .balance-positive {
    color: #198754;
    font-weight: 600;
  }
  .balance-negative {
    color: #dc3545;
    font-weight: 600;
  }
  .balance-zero {
    color: #6c757d;
  }
  .export-buttons .btn {
    margin-right: 0.5rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
  
  <!-- Header with Add Button and Export -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <a href="{% url 'payroll:staff_add' %}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Add Staff
      </a>

      <div class="dropdown d-inline-block">
        <button class="btn btn-outline-primary dropdown-toggle" type="button"
        id="bulkImportDropdown" data-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-file-earmark-spreadsheet"></i> Bulk Import
        </button>
        <ul class="dropdown-menu" aria-labelledby="bulkImportDropdown">
          <li>
            <a class="dropdown-item" href="{% url 'payroll:staff_bulk_template' %}">
              <i class="bi bi-download"></i> Download Excel Template
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#" onclick="document.getElementById('bulk-upload-input').click(); return false;">
              <i class="bi bi-upload"></i> Upload Filled Excel
            </a>
          </li>
        </ul>
      </div>

      <form id="bulk-upload-form" method="post" enctype="multipart/form-data"
            action="{% url 'payroll:staff_bulk_upload' %}" style="display:none;">
        {% csrf_token %}
        <input type="file" name="excel_file" id="bulk-upload-input" accept=".xlsx">
      </form>
    </div>
    <div class="export-buttons">
      <a href="{% url 'payroll:staff_list_excel' %}?{{ request.GET.urlencode }}" class="btn btn-success">
        <i class="bi bi-file-earmark-excel"></i> Export Excel
      </a>
      <a href="{% url 'payroll:staff_list_pdf' %}?{{ request.GET.urlencode }}" class="btn btn-secondary" target="_blank">
        <i class="bi bi-file-earmark-pdf"></i> Export PDF
      </a>
    </div>
  </div>

  <!-- Filters Section -->
  <div class="filter-section">
    <form method="get" action="{% url 'payroll:staff_list' %}" class="row g-3 align-items-end">
      
      <!-- Filter by Name (Select2 Ajax) -->
      <div class="col-md-4">
        <label for="staff-select" class="form-label">Filter by Name</label>
        <select 
          id="staff-select" 
          name="staff_id" 
          class="form-control" 
          style="width: 100%;"
          data-placeholder="Search staff by name..."
        >
          {% if selected_staff %}
            <option value="{{ selected_staff.t_id }}" selected>{{ selected_staff.name }}</option>
          {% endif %}
        </select>
      </div>

      <!-- Filter by Status -->
      <div class="col-md-2">
        <label for="status" class="form-label">Status</label>
        <select name="status" id="status" class="form-select">
          <option value="" {% if not request.GET.status %}selected{% endif %}>All Staff</option>
          <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active Only</option>
          <option value="inactive" {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive Only</option>
        </select>
      </div>

      <!-- Filter by Balance -->
      <div class="col-md-2">
        <label for="balance_filter" class="form-label">Balance</label>
        <select name="balance_filter" id="balance_filter" class="form-select">
          <option value="" {% if not request.GET.balance_filter %}selected{% endif %}>Show All</option>
          <option value="with_balance" {% if request.GET.balance_filter == 'with_balance' %}selected{% endif %}>With Balance</option>
          <option value="without_balance" {% if request.GET.balance_filter == 'without_balance' %}selected{% endif %}>Without Balance</option>
        </select>
      </div>

      <!-- Filter Buttons -->
      <div class="col-md-4">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-funnel"></i> Filter
        </button>
        <a href="{% url 'payroll:staff_list' %}" class="btn btn-outline-secondary">
          <i class="bi bi-x-circle"></i> Clear
        </a>
      </div>
    </form>
  </div>

  <!-- Staff Table -->
  <div class="table-responsive">
    <table class="table table-striped table-bordered align-middle">
      <thead class="table-light">
        <tr>
          <th style="width: 40px;">#</th>
          <th>T-ID</th>
          <th>Name</th>
          <th>Pay Type</th>
          <th class="text-end">Monthly Salary</th>
          <th class="text-end">Daily Wage</th>
          <th class="text-end">Balance</th>
          <th class="text-center">Status</th>
          <th style="min-width: 180px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for item in staff_list %}
        <tr class="{% if not item.staff.is_active %}table-secondary{% endif %}">
          <td>{{ forloop.counter }}</td>
          <td>{{ item.staff.t_id }}</td>
          <td>
            {{ item.staff.name }}
            {% if not item.staff.is_active %}
              <span class="badge bg-secondary ms-1">Inactive</span>
            {% endif %}
          </td>
          <td>{{ item.staff.get_pay_type_display|default:item.staff.pay_type }}</td>
          <td class="text-end">{{ item.staff.monthly_salary|floatformat:2|default:"-" }}</td>
          <td class="text-end">{{ item.staff.daily_wage|floatformat:2|default:"-" }}</td>
          <td class="text-end {% if item.balance > 0 %}balance-positive{% elif item.balance < 0 %}balance-negative{% else %}balance-zero{% endif %}">
            {{ item.balance|floatformat:2 }}
          </td>
          <td class="text-center">
            {% if item.staff.is_active %}
              <span class="badge bg-success">Active</span>
            {% else %}
              <span class="badge bg-secondary">Inactive</span>
            {% endif %}
          </td>
          <td>
            <a href="{% url 'payroll:staff_ledger' item.staff.t_id %}" class="btn btn-sm btn-info" title="View Ledger">
              <i class="bi bi-journal-text"></i> Ledger
            </a>
            <a href="{% url 'payroll:staff_edit' item.staff.pk %}" class="btn btn-sm btn-primary" title="Edit">
              <i class="bi bi-pencil"></i>
            </a>
            <a href="{% url 'payroll:staff_delete' item.staff.pk %}" 
               class="btn btn-sm btn-danger"
               onclick="return confirm('Delete {{ item.staff.name }}?');"
               title="Delete">
              <i class="bi bi-trash"></i>
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="9" class="text-center">No staff members found.</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-secondary">
        <tr>
          <th colspan="6" class="text-end">Total Balance:</th>
          <th class="text-end {% if total_balance > 0 %}balance-positive{% elif total_balance < 0 %}balance-negative{% else %}balance-zero{% endif %}">
            {{ total_balance|floatformat:2 }}
          </th>
          <th colspan="2"></th>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- Summary Cards -->
  <div class="row mt-4">
    <div class="col-md-3">
      <div class="card text-white bg-primary">
        <div class="card-body text-center">
          <h5 class="card-title">Total Staff</h5>
          <h3>{{ total_count }}</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-white bg-success">
        <div class="card-body text-center">
          <h5 class="card-title">Active</h5>
          <h3>{{ active_count }}</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-white bg-secondary">
        <div class="card-body text-center">
          <h5 class="card-title">Inactive</h5>
          <h3>{{ inactive_count }}</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-white {% if total_balance >= 0 %}bg-info{% else %}bg-danger{% endif %}">
        <div class="card-body text-center">
          <h5 class="card-title">Total Balance</h5>
          <h3>{{ total_balance|floatformat:2 }}</h3>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
$(function() {
  // Initialize Select2 for staff filter
  $('#staff-select').select2({
    placeholder: $('#staff-select').data('placeholder'),
    allowClear: true,
    ajax: {
      url: "{% url 'payroll:staff_autocomplete' %}",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return { term: params.term };
      },
      processResults: function(data) {
        return { results: data.results };
      },
      cache: true
    }
  });

  // Clear staff_id when Select2 is cleared
  $('#staff-select').on('select2:clear', function() {
    $(this).val('').trigger('change');
  });
});
document.getElementById('bulk-upload-input').addEventListener('change', function () {
  if (this.files && this.files.length) {
    document.getElementById('bulk-upload-form').submit();
  }
});


</script>
{% endblock %}