{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1200px;">
  {% set role_name = (current_user.role.name if current_user.role else '')|lower %}

  <!-- Page header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-cash-coin me-1"></i>
        Payroll Summary
      </h4>
      <small class="text-muted">
        Month: {{ "%02d"|format(month) }} / {{ year }}
      </small>
    </div>

    <div class="d-flex gap-2">
      <!-- Consolidated view -->
      <a class="btn btn-outline-primary btn-sm"
         href="{{ url_for('payroll.consolidated_salary_view',
                          month='%04d-%02d'|format(year, month)) }}">
        <i class="bi bi-table me-1"></i> Consolidated View
      </a>

      <!-- Disbursement sheet -->
      <a class="btn btn-outline-success btn-sm"
         href="{{ url_for('payroll.download_disbursement_sheet',
                          month='%04d-%02d'|format(year, month)) }}">
        <i class="bi bi-file-earmark-excel me-1"></i> Disbursement Sheet
      </a>

      <!-- Unfreeze month (HR/Admin only) -->
      {% if role_name in ['hr', 'admin'] %}
      <form method="post"
            action="{{ url_for('payroll.unfreeze_month') }}"
            class="d-inline">
        <input type="hidden" name="month"
               value="{{ '%04d-%02d'|format(year, month) }}">
        <input type="hidden" name="reason" value="">
        <button type="submit" class="btn btn-outline-danger btn-sm"
                onclick="return confirm('Are you sure you want to unfreeze the entire month {{ '%04d-%02d'|format(year, month) }}?');">
          <i class="bi bi-unlock me-1"></i> Unfreeze Month
        </button>
      </form>
      {% endif %}
    </div>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm mb-3">
    <div class="card-body">
      <form method="get" class="row g-2 align-items-end">
        <!-- Month -->
        <div class="col-md-2">
          <label class="form-label mb-1">Month</label>
          <select name="month" class="form-select form-select-sm">
            {% for m in range(1, 13) %}
              <option value="{{ m }}" {% if m == month %}selected{% endif %}>
                {{ "%02d"|format(m) }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Year -->
        <div class="col-md-2">
          <label class="form-label mb-1">Year</label>
          <input type="number"
                 name="year"
                 class="form-control form-control-sm"
                 value="{{ year }}">
        </div>

        <!-- 1. Company (Emp Code Prefix) -->
        <div class="col-md-2">
          <label class="form-label mb-1">Company (Code Prefix)</label>
          <select name="inst" class="form-select form-select-sm">
            <option value="">All</option>
            {% for p in code_prefixes %}
              <option value="{{ p }}" {% if p == selected_prefix %}selected{% endif %}>
                {{ p }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- 2. Location (Workplace) -->
        <div class="col-md-2">
          <label class="form-label mb-1">Location</label>
          <select name="location" class="form-select form-select-sm">
            <option value="">All</option>
            {% for loc in locations %}
              <option value="{{ loc }}" {% if loc == selected_location %}selected{% endif %}>
                {{ loc }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- 3. Department -->
        <div class="col-md-2">
          <label class="form-label mb-1">Department</label>
          <select name="department_id" class="form-select form-select-sm">
            <option value="">All</option>
            {% for d in departments %}
              <option value="{{ d.id }}" {% if d.id == dept_id %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- 4. Designation -->
        <div class="col-md-2">
          <label class="form-label mb-1">Designation</label>
          <select name="designation_id" class="form-select form-select-sm">
            <option value="">All</option>
            {% for des in designations %}
              <option value="{{ des.id }}" {% if des.id == desig_id %}selected{% endif %}>
                {{ des.title }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 mt-2 d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-funnel me-1"></i> Apply Filters
          </button>
          <a href="{{ url_for('payroll.payroll_summary', month=month, year=year) }}"
             class="btn btn-outline-secondary btn-sm">
            Reset
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Totals summary -->
  <div class="row mb-3">
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Employees</span>
            <span class="fw-semibold">{{ total_employees }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 mt-2 mt-md-0">
      <div class="card shadow-sm">
        <div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Total Gross</span>
            <span class="fw-semibold">{{ "%.2f"|format(total_gross) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 mt-2 mt-md-0">
      <div class="card shadow-sm">
        <div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Total Net</span>
            <span class="fw-semibold">{{ "%.2f"|format(total_net) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Records table -->
  <div class="card shadow-sm">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
      <span class="fw-semibold">
        <i class="bi bi-list-ul me-1"></i> Frozen Payroll Records
      </span>
      {% if records|length == 0 %}
        <span class="badge bg-warning text-dark">No records found</span>
      {% endif %}
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width: 50px;">#</th>
            <th>Emp Code</th>
            <th>Employee</th>
            <th>Department</th>
            <th>Status</th>
            <th class="text-center">F&amp;F</th>
            <th class="text-end">Gross</th>
            <th class="text-end">Net</th>
            <th style="width: 220px;" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if records %}
            {% for item in records %}
              {% set rec = item.record %}
              {% set emp = item.employee %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>{{ emp.employee_code or "-" }}</td>
                <td>
                  <div class="fw-semibold">{{ emp.full_name }}</div>
                  <div class="small text-muted">
                    {{ emp.location or '' }}
                  </div>
                </td>
                <td>
                  {{ emp.department.name if emp.department else '-' }}
                </td>
                <td>
                  <span class="badge bg-{{ item.status_color }}">
                    {{ item.status_label }}
                  </span>
                </td>
                <td class="text-center">
                  {% if item.is_fnf %}
                    <span class="badge bg-outline-warning text-warning border border-warning">
                      F&amp;F
                    </span>
                  {% else %}
                    <span class="text-muted small">-</span>
                  {% endif %}
                </td>
                <td class="text-end">
                  {{ "%.2f"|format(rec.gross_pay or 0) }}
                </td>
                <td class="text-end">
                  {{ "%.2f"|format(rec.net_pay or 0) }}
                </td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm">
                    <!-- View Slip (HTML) -->
                    <a class="btn btn-outline-primary"
                       title="View salary slip"
                       href="{{ url_for('payroll.view_salary_slip',
                                        employee_id=emp.id,
                                        month=rec.month) }}">
                      <i class="bi bi-file-text"></i>
                    </a>

                    <!-- Download PDF -->
                    <a class="btn btn-outline-secondary"
                       title="Download slip PDF"
                       href="{{ url_for('payroll.download_salary_slip_pdf',
                                        employee_id=emp.id,
                                        month=rec.month) }}">
                      <i class="bi bi-file-earmark-pdf"></i>
                    </a>

                    <!-- Attendance details -->
                    <a class="btn btn-outline-info"
                       title="View attendance details"
                       href="{{ url_for('payroll.view_attendance_details',
                                        employee_id=emp.id,
                                        year=year,
                                        month=month) }}">
                      <i class="bi bi-calendar-week"></i>
                    </a>

                    <!-- Unfreeze employee (HR/Admin only) -->
                    {% if role_name in ['hr', 'admin'] %}
                    <form method="post"
                          action="{{ url_for('payroll.unfreeze_employee') }}"
                          class="d-inline">
                      <input type="hidden" name="month"
                             value="{{ rec.month }}">
                      <input type="hidden" name="employee_id"
                             value="{{ emp.id }}">
                      <input type="hidden" name="reason" value="">
                      <button type="submit"
                              class="btn btn-outline-danger"
                              title="Unfreeze this employee"
                              onclick="return confirm('Unfreeze payroll for {{ emp.full_name }} ({{ rec.month }})?');">
                        <i class="bi bi-unlock"></i>
                      </button>
                    </form>
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="9" class="text-center text-muted py-3">
                No payroll records found for the selected month / filters.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}