{# templates/payroll/salary_range.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Salary Range Preview & Finalize{% endblock %}

{% block stylesheets %}

  <style>
    /* Make the staff‐table scrollable if there are many */
    .table-staff-container {
      max-height: 250px;
      overflow-y: auto;
      border: 1px solid #dee2e6;
      border-radius: 0.25rem;
    }
    .table-staff-container table {
      margin-bottom: 0;
    }
    /* Fix the header of the preview table */
    #preview-table th {
      background-color: #f8f9fa;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    #preview-table {
      margin-top: 20px;
    }
    /* Complete Month Attendance Card */
    .attendance-card {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-bottom: 2rem;
    }
  </style>
{% endblock %}
{% block heading %}Salary Range Preview &amp; Finalize{% endblock %}
{% block content %}
<div class="container py-4">

  {# ──────────────────────────────────────────────────────────────────────── #}
  {# COMPLETE MONTH ATTENDANCE SECTION (NEW)                                  #}
  {# ──────────────────────────────────────────────────────────────────────── #}
  <div class="attendance-card">
    <h5 class="mb-3">
      <i class="bi bi-calendar-check"></i> Complete Month Attendance
      <small class="text-muted">(Mark all active staff as present for entire month)</small>
    </h5>
    <form method="post" action="{% url 'payroll:complete_month_attendance_salary' %}" 
          onsubmit="return confirm('This will mark attendance for ALL ACTIVE staff for the selected month. Any existing attendance records for this month will be replaced. Continue?');">
      {% csrf_token %}
      <div class="row g-3 align-items-end">
        <div class="col-md-3">
          <label for="attendance_month" class="form-label">Select Month</label>
          <input 
            type="month" 
            id="attendance_month" 
            name="month" 
            class="form-control"
            value="{% now 'Y-m' %}"
            required
          >
        </div>
        <div class="col-md-4">
          <button type="submit" class="btn btn-warning">
            <i class="bi bi-check2-all"></i> Mark Complete Month Attendance
          </button>
        </div>
        <div class="col-md-5">
          <small class="text-muted">
            <strong>Note:</strong> Only <span class="badge bg-success">Active</span> staff will be marked. 
            Inactive staff will be skipped.
          </small>
        </div>
      </div>
    </form>
  </div>

  <hr class="my-4">

  {# ──────────────────────────────────────────────────────────────────────── #}
  {# 1) MAIN FORM: selects Start Date, End Date, Weekdays, and Staff table     #}
  {# When you hit "Preview", this same view reloads and shows the preview below. #}
  {# ──────────────────────────────────────────────────────────────────────── #}
  <form method="post" action="{% url 'payroll:salary_range' %}">
    {% csrf_token %}
    <div class="row g-3 align-items-end mb-4">
      <!-- Start Date -->
      <div class="col-md-3">
        <label for="start_date" class="form-label">Start Date</label>
        <input
          type="date"
          id="start_date"
          name="start_date"
          class="form-control"
          value="{{ range_start|default:start_date|date:'Y-m-d' }}"
          required
        >
      </div>
      <!-- End Date -->
      <div class="col-md-3">
        <label for="end_date" class="form-label">End Date</label>
        <input
          type="date"
          id="end_date"
          name="end_date"
          class="form-control"
          value="{{ range_end|default:end_date|date:'Y-m-d' }}"
          required
        >
      </div>
      <!-- Weekday Checkboxes -->
      <div class="col-md-6">
        <label class="form-label">Weekdays</label><br/>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="0"
            id="wd_0"
            {% if 0 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_0">Mon</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="1"
            id="wd_1"
            {% if 1 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_1">Tue</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="2"
            id="wd_2"
            {% if 2 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_2">Wed</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="3"
            id="wd_3"
            {% if 3 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_3">Thu</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="4"
            id="wd_4"
            {% if 4 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_4">Fri</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="5"
            id="wd_5"
            {% if 5 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_5">Sat</label>
        </div>
        <div class="form-check form-check-inline">
          <input
            class="form-check-input"
            type="checkbox"
            name="weekdays"
            value="6"
            id="wd_6"
            {% if 6 in weekdays %} checked {% endif %}
          >
          <label class="form-check-label" for="wd_6">Sun</label>
        </div>
      </div>
    </div>

    <!-- ─────────────────────────────────────────────────────────────────────── #-->
    <!-- 2) Scrollable Staff Table (ONLY ACTIVE STAFF)                          -->
    <!-- ─────────────────────────────────────────────────────────────────────── #-->
    <div class="row mb-4">
      <label class="col-sm-2 col-form-label">
        Staff 
        <span class="badge bg-success">Active Only</span>
      </label>
      <div class="col-sm-10 table-staff-container">
        <table class="table table-sm table-bordered">
          <thead class="table-light">
            <tr>
              <th style="width: 40px;">
                <input
                  type="checkbox"
                  id="select-all-staff"
                  title="(Un)check All Staff"
                  {% if all_staff|length == selected_staff|length %}
                    checked
                  {% endif %}
                >
              </th>
              <th style="width: 40px;">#</th>
              <th>Name</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for staff in all_staff %}
            <tr>
              <td class="text-center">
                <input
                  type="checkbox"
                  name="staff"
                  value="{{ staff.t_id }}"
                  class="form-check-input staff-checkbox"
                  {% if show_preview %}
                    {% if staff.t_id in selected_staff %} checked {% endif %}
                  {% else %}
                    checked
                  {% endif %}
                >
              </td>
              <td>{{ forloop.counter }}</td>
              <td>{{ staff.name }}</td>
              <td>
                <span class="badge bg-success">Active</span>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted">No active staff found.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- ──────────────────────────────────────────────────────────────────────── #-->
    <!-- 3) Action Buttons                                                        #-->
    <!-- ──────────────────────────────────────────────────────────────────────── #-->
    <div class="mb-4">
      <button type="submit" class="btn btn-primary">Preview</button>
    </div>
  </form>

  {# ──────────────────────────────────────────────────────────────────────── #}
  {# 4) HTML "Preview" Results (only if show_preview=True)                   #}
  {# ──────────────────────────────────────────────────────────────────────── #}
  {% if show_preview %}
    <hr>
    <div class="row mb-3">
      <div class="col">
        <h4>Preview Results ({{ range_start }} – {{ range_end }})</h4>
      </div>
    </div>

    <div class="table-responsive" id="preview-table">
      <table class="table table-sm table-bordered align-middle">
        <thead class="table-light">
          <tr>
            <th style="width: 40px;">
              <input type="checkbox" id="preview-select-all" checked>
            </th>
            <th style="width: 40px;">#</th>
            <th>Staff Name</th>
            <th class="text-end">Att. Days</th>
            <th class="text-end">Att. Pay</th>
            <th class="text-end">Commission</th>
            <th class="text-end">Overtime</th>
            <th class="text-end">Bonus</th>
            <th class="text-end">Deduction</th>
            <th class="text-end">Net Salary</th>
          </tr>
        </thead>
        <tbody>
          {% for row in preview_data %}
          <tr>
            <td class="text-center">
              <input
                type="checkbox"
                class="form-check-input preview-staff-checkbox"
                data-staff-id="{{ row.staff_t_id }}"
                checked
              >
            </td>
            <td>{{ forloop.counter }}</td>
            <td>{{ row.staff_name }}</td>
            <td class="text-end">{{ row.attendance_days }}</td>
            <td class="text-end">{{ row.attendance_amount|floatformat:2 }}</td>
            <td class="text-end">{{ row.commission_amount|floatformat:2 }}</td>
            <td class="text-end">{{ row.overtime_amount|floatformat:2 }}</td>
            <td class="text-end">{{ row.bonus_amount|floatformat:2 }}</td>
            <td class="text-end">{{ row.deduction_amount|floatformat:2 }}</td>
            <td class="text-end">{{ row.net_amount|floatformat:2 }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot class="table-light fw-bold">
          <tr>
            <td colspan="3" class="text-end">Totals:</td>
            <td class="text-end">{{ totals.attendance|floatformat:2 }}</td>
            <td class="text-end">{{ totals.attendance|floatformat:2 }}</td>
            <td class="text-end">{{ totals.commission|floatformat:2 }}</td>
            <td class="text-end">{{ totals.overtime|floatformat:2 }}</td>
            <td class="text-end">{{ totals.bonus|floatformat:2 }}</td>
            <td class="text-end">{{ totals.deduction|floatformat:2 }}</td>
            <td class="text-end">{{ totals.net|floatformat:2 }}</td>
          </tr>
        </tfoot>
      </table>
    </div>

    {# ───────────────────────────────────────────────────────────────────── #}
    {# Hidden forms for "Finalize Selected" and "Download PDF Preview"      #}
    {# We copy start_date, end_date, all checked weekdays, and the staff IDs #}
    {# from above so that these two forms receive exactly the same POST data. #}
    {# ───────────────────────────────────────────────────────────────────── #}
    <div class="mt-4 d-flex gap-2">
      <!-- Finalize Selected -->
      <form method="post" action="{% url 'payroll:salary_finalize' %}" id="form-finalize">
        {% csrf_token %}
        <input type="hidden" name="start_date" value="{{ range_start|date:'Y-m-d' }}">
        <input type="hidden" name="end_date"   value="{{ range_end|date:'Y-m-d'  }}">
        {% for wd in weekdays %}
          <input type="hidden" name="weekdays" value="{{ wd }}">
        {% endfor %}
        {% for t_id in selected_staff %}
          <input type="hidden" name="staff" value="{{ t_id }}">
        {% endfor %}
        <button type="submit" class="btn btn-success">Finalize Selected</button>
      </form>

      <!-- Download PDF Preview -->
      <form method="post" action="{% url 'payroll:salary_preview_pdf' %}" id="form-pdf" target="_blank">
        {% csrf_token %}
        <input type="hidden" name="start_date" value="{{ range_start|date:'Y-m-d' }}">
        <input type="hidden" name="end_date"   value="{{ range_end|date:'Y-m-d'  }}">
        {% for wd in weekdays %}
          <input type="hidden" name="weekdays" value="{{ wd }}">
        {% endfor %}
        {% for t_id in selected_staff %}
          <input type="hidden" name="staff" value="{{ t_id }}">
        {% endfor %}
        <button type="submit" class="btn btn-secondary">Download PDF Preview</button>
      </form>
    </div>
  {% endif %}
</div>

<hr class="my-4">

<form method="post" action="{% url 'payroll:salary_finalize_daily' %}">
  {% csrf_token %}
  <h3 for="finalize_date">Finalize Salary on Daily bases</h3>
  <input
    type="date"
    id="finalize_date"
    name="date"
    class="form-control"
    value="{{ range_end|default:end_date|date:'Y-m-d' }}"
    required
  >
  <button type="submit" class="btn btn-info mt-2">
    Finalize Daily Salary
  </button>
</form>



{% endblock %}

{% block javascripts %}

<script> 
  $(function(){
    // 1) "Select All Staff" (top of staff table)
    $('#select-all-staff').on('change', function(){
      const checked = $(this).is(':checked');
      $('.staff-checkbox').prop('checked', checked);
    });

    // 2) "Preview Select All" toggles all preview checkboxes
    $('#preview-select-all').on('change', function(){
      const checked = $(this).is(':checked');
      $('.preview-staff-checkbox').prop('checked', checked);
    });

    // 3) When a preview‐checkbox is unchecked, remove its hidden <input name="staff"> 
    //    from both "Finalize" and "PDF" forms so that only the checked ones remain.
    $(document).on('change', '.preview-staff-checkbox', function(){
      const staffId = $(this).data('staff-id').toString();
      if (!$(this).is(':checked')) {
        $("#form-finalize input[name='staff'][value='" + staffId + "']").remove();
        $("#form-pdf      input[name='staff'][value='" + staffId + "']").remove();
      }
    });
  });
</script>
{% endblock %}