{% extends "base.html" %}
{% block content %}

<style>
  /* --- Page density tweaks --- */
  .page-title { font-weight: 700; }
  .sub-badges .badge { font-size: .72rem; padding: .25rem .45rem; }

  /* --- Filters --- */
  .filters-card .form-label { font-size: .78rem; margin-bottom: .25rem; }
  .filters-card .form-select,
  .filters-card .form-control { height: 34px; }
  .filters-card .btn { height: 34px; }

  /* --- Table --- */
  .payroll-table-wrap {
    max-height: 70vh;
    overflow: auto;          /* both x and y */
  }

  table.payroll-table {
    font-size: .82rem;
    min-width: 1400px;       /* ensures horizontal scroll instead of squishing */
  }

  table.payroll-table th,
  table.payroll-table td {
    padding: .45rem .55rem;
    vertical-align: middle;
    white-space: nowrap;     /* prevents ugly wrapping */
  }

  thead.sticky-top th {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Make first columns slightly sticky (optional but feels great) */
  .sticky-col {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--bs-body-bg);
  }
  .sticky-col-2 {
    position: sticky;
    left: 55px; /* width of first col approx */
    z-index: 6;
    background: var(--bs-body-bg);
  }

  /* Keep sticky header background solid */
  thead.sticky-top th { background: #212529 !important; }

  /* Remarks column nicer */
  .remarks-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Smaller action buttons */
  .btn-xs {
    padding: .2rem .45rem;
    font-size: .78rem;
    border-radius: .35rem;
  }
</style>

<div class="container-fluid mt-4">

  <!-- Header -->
  <div class="d-flex align-items-start justify-content-between mb-3 gap-2 flex-wrap">
    <div>
      <h3 class="m-0 page-title">Payroll Preview – {{ "%02d"|format(month) }}/{{ year }}</h3>
      <div class="small text-muted mt-1 sub-badges">
        <span class="badge bg-success me-1">Active</span>
        <span class="badge bg-warning text-dark me-1">Notice</span>
        <span class="badge bg-info">FnF</span>
      </div>
    </div>

    <div class="d-flex gap-2 flex-wrap align-items-center">
      <!-- Enable Preview -->
      <form action="{{ url_for('payroll.enable_preview_for_month') }}" method="POST" class="m-0">
        {{ csrf_token() if csrf_token is defined }}
        <input type="hidden" name="month" value="{{ period }}">
        <button type="submit" class="btn btn-outline-primary btn-sm">
          <i class="bi bi-eye me-1"></i> Enable Preview to All Employees
        </button>
      </form>

      <!-- Freeze Payroll -->
      <form action="{{ url_for('payroll.freeze_payroll') }}" method="post" class="m-0">
        {{ csrf_token() if csrf_token is defined }}
        <input type="hidden" name="month" value="{{ "%04d-%02d" | format(year, month) }}">
        <button type="submit" class="btn btn-success btn-sm"
                onclick="return confirm('Are you sure you want to FREEZE payroll for {{ '%02d'|format(month) }}/{{ year }}? This will lock the month.');">
          <i class="bi bi-lock-fill me-1"></i> Freeze &amp; Save Payroll
        </button>
      </form>
    </div>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm mb-3 filters-card">
    <div class="card-header bg-light py-2">
      <div class="d-flex justify-content-between align-items-center">
        <span class="fw-semibold"><i class="bi bi-funnel me-1"></i> Filters</span>
        <small class="text-muted">Use filters and click Preview to refresh</small>
      </div>
    </div>

    <div class="card-body py-3">
      <form method="get" class="row g-2 align-items-end">

        <div class="col-6 col-md-2">
          <label class="form-label">Month</label>
          <select name="month" class="form-select form-select-sm" required>
            {% for m in range(1, 13) %}
              <option value="{{ m }}" {% if m == month %}selected{% endif %}>{{ "%02d"|format(m) }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-6 col-md-2">
          <label class="form-label">Year</label>
          <select name="year" class="form-select form-select-sm" required>
            {% for y in range(2022, 2031) %}
              <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 col-md-2">
          <label class="form-label">Company</label>
          <select name="inst" class="form-select form-select-sm">
            <option value="">All Companies</option>
            {% for p in code_prefixes %}
              <option value="{{ p }}" {% if p == selected_prefix %}selected{% endif %}>{{ p }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 col-md-2">
          <label class="form-label">Location</label>
          <select name="location" class="form-select form-select-sm">
            <option value="">All Locations</option>
            {% for loc in locations %}
              <option value="{{ loc }}" {% if loc == selected_location %}selected{% endif %}>{{ loc }}</option>
            {% endfor %}
          </select>
        </div>

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

        <div class="col-12 col-md-2">
          <label class="form-label">Designation</label>
          <div class="d-flex gap-2">
            <select name="designation_id" class="form-select form-select-sm">
              <option value="">All Designations</option>
              {% for des in designations %}
                <option value="{{ des.id }}" {% if desig_id == des.id %}selected{% endif %}>{{ des.title }}</option>
              {% endfor %}
            </select>
            <button type="submit" class="btn btn-primary btn-sm flex-shrink-0">
              Preview
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>

  <!-- Table -->
  <div class="card shadow-sm">
    <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
      <span class="fw-semibold"><i class="bi bi-list-ol me-1"></i> Preview Details</span>
      <small class="text-muted">
        Showing {{ payroll_preview|length }} employee{{ payroll_preview|length != 1 and 's' or '' }}
      </small>
    </div>

    <div class="card-body p-0">
      <div class="payroll-table-wrap">
        <table class="table table-hover mb-0 payroll-table">
          <thead class="table-dark sticky-top">
            <tr>
              <th class="sticky-col">#</th>
              <th class="sticky-col-2">Emp Code</th>
              <th>Department</th>
              <th>Employee</th>
              <th class="text-center">Tag</th>
              <th class="text-center">Paid Days</th>
              <th class="text-center">Present</th>
              <th class="text-center">Leave</th>
              <th class="text-center">Holiday</th>
              <th class="text-center">Weekends</th>
              <th class="text-center">LWP</th>
              <th class="text-end">Earnings (₹)</th>
              <th class="text-end">Deductions (₹)</th>
              <th class="text-end">CTC (₹)</th>
              <th class="text-end">Net Pay (₹)</th>
              <th class="text-end">Last Frozen Net (₹)</th>
              <th>Remarks</th>
              <th class="text-center">Attendance</th>
            </tr>
          </thead>

          <tbody>
            {% if payroll_preview %}
              {% for row in payroll_preview %}
                <tr class="{{ 'table-info' if row.fnf_tag else '' }}">
                  <td class="sticky-col">{{ loop.index }}</td>

                  <td class="sticky-col-2 fw-semibold">
                    {{ row.employee.employee_code }}
                  </td>

                  <td>{{ row.employee.department.name if row.employee.department else '-' }}</td>
                  <td>{{ row.employee.full_name }}</td>

                  <td class="text-center">
                    {% if row.fnf_tag %}
                      <span class="badge bg-info"
                            title="LWD: {{ row.lwd.strftime('%d %b %Y') if row.lwd }}">
                        FnF
                      </span>
                    {% elif row.status_tag == 'notice' %}
                      <span class="badge bg-warning text-dark">Notice</span>
                    {% else %}
                      <span class="badge bg-success">Active</span>
                    {% endif %}
                  </td>

                  <td class="text-center">{{ row.total_paid_days }}</td>
                  <td class="text-center">{{ row.present }}</td>
                  <td class="text-center">{{ row.leaves }}</td>
                  <td class="text-center">{{ row.holidays }}</td>
                  <td class="text-center">{{ row.weekends }}</td>
                  <td class="text-center text-danger fw-semibold">{{ row.lwp }}</td>

                  <td class="text-end">{{ "%.2f"|format(row.earnings) }}</td>
                  <td class="text-end">{{ "%.2f"|format(row.deductions) }}</td>
                  <td class="text-end">{{ "%.2f"|format(row.ctc) }}</td>
                  <td class="text-end fw-semibold">{{ "%.2f"|format(row.net_pay) }}</td>

                  <td class="text-end">
                    {% if row.last_frozen_month %}
                      <div class="small text-muted">{{ row.last_frozen_month }}</div>
                      <div>{{ "%.2f"|format(row.last_frozen_net_pay or 0) }}</div>
                    {% else %}
                      <span class="text-muted">—</span>
                    {% endif %}
                  </td>

                  <td class="remarks-cell">
                    {% if row.remarks is defined and row.remarks %}
                      <span class="small text-muted" title="{{ row.remarks }}">{{ row.remarks }}</span>
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td class="text-center">
                    <a href="{{ url_for('payroll.view_attendance_details',
                                        employee_id=row.employee.id,
                                        month=month, year=year) }}"
                       class="btn btn-outline-primary btn-xs">
                      <i class="bi bi-calendar3 me-1"></i> View
                    </a>
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="18" class="text-center text-muted py-3">
                  No records found for the selected month / filters.
                </td>
              </tr>
            {% endif %}
          </tbody>

        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}