{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <h4 class="mb-3">Monthly Attendance Summary</h4>

  <!-- Filters -->
  <form method="get" class="row g-2 align-items-end mb-3">
    <div class="col-sm-3">
      <label class="form-label mb-1">Month</label>
      <input type="month" name="month" class="form-control" value="{{ selected_month }}" required>
    </div>
    <div class="col-sm-4">
      <label class="form-label mb-1">Employee (name contains)</label>
      <input type="text" name="employee_name" class="form-control" placeholder="e.g., Ritesh"
             value="{{ employee_name or '' }}">
    </div>
    <div class="col-sm-5 d-flex gap-2">
      <button class="btn btn-primary">Apply</button>
      <a class="btn btn-secondary" href="{{ url_for('attendance_summary.monthly_attendance_summary') }}">Reset</a>
    </div>
  </form>

  <!-- Legend -->
  <div class="d-flex flex-wrap align-items-center gap-2 mb-3 small">
    <span class="badge bg-success">Present</span>
    <span class="badge bg-info text-dark">Half Day</span>
    <span class="badge bg-warning text-dark">Leave</span>
    <span class="badge bg-secondary">Holiday</span>
    <span class="badge bg-dark">Weekend</span>
    <span class="badge bg-danger">LWP</span>
    <span class="text-muted ms-2">Click a cell to edit · Green border = edited manually/bulk</span>
  </div>

  <!-- Bulk Month Update -->
  <form method="post" action="{{ url_for('attendance_summary.bulk_month_update') }}"
        id="bulkForm" class="border rounded p-3 mb-3">
    <div class="row g-2 align-items-end">
      <div class="col-lg-2 col-md-3">
        <label class="form-label mb-1">Month</label>
        <input type="month" name="month" class="form-control" value="{{ selected_month }}" required>
      </div>
      <div class="col-lg-3 col-md-4">
        <label class="form-label mb-1">Set Status</label>
        <select name="status" class="form-select" required>
          <option value="Present">Present</option>
          <option value="Half Day">Half Day</option>
          <option value="Leave">Leave</option>
          <option value="Holiday">Holiday</option>
          <option value="Weekend">Weekend</option>
          <option value="LWP">LWP</option>
          <option value="">Clear (blank)</option>
        </select>
      </div>
      <div class="col-lg-4 col-md-5">
        <label class="form-label mb-1">Comment (optional)</label>
        <input type="text" name="note" class="form-control" placeholder="Reason / note for bulk update">
      </div>
      <div class="col-lg-3 d-flex flex-column">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="skip_weekends" id="skip_we" checked>
          <label class="form-check-label" for="skip_we">Skip Weekends</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="skip_holidays" id="skip_hol" checked>
          <label class="form-check-label" for="skip_hol">Skip Holidays</label>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between mt-2">
        <div class="text-muted small">Tip: select employees with the checkboxes on the left.</div>
        <button class="btn btn-success">Apply to Selected Employees</button>
      </div>
    </div>
    <!-- hidden selected IDs injected by JS -->
    <div id="bulkHidden"></div>
  </form>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for c, m in messages %}
        <div class="alert alert-{{ c }} alert-dismissible fade show" role="alert">
          {{ m }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% set has_rows = summary_data and summary_data|length > 0 %}
  {% if has_rows %}
    {% set days = summary_data[0].days %}
    <div class="table-responsive">
      <table class="table table-bordered table-sm align-middle">
        <thead class="table-light position-sticky top-0">
          <tr class="text-nowrap">
            <th style="min-width: 260px;">
              <div class="form-check m-0">
                <input class="form-check-input" type="checkbox" id="selAll">
                <label class="form-check-label" for="selAll">Employee</label>
              </div>
            </th>
            {% for cell in days %}
              <th class="text-center" style="width:46px;">
                {{ cell.date.day }}
                <div class="text-muted small">{{ cell.date.strftime('%a') }}</div>
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in summary_data %}
            {% set emp = row.employee %}
            {% set frozen = row.payroll_frozen %}
            <tr class="text-nowrap">
              <!-- Employee cell with selector -->
              <td style="white-space: nowrap; min-width: 260px;">
                <div class="d-flex align-items-start gap-2">
                  <div class="pt-1">
                    <input class="form-check-input emp-check"
                           type="checkbox"
                           value="{{ emp.id }}"
                           {% if frozen %}disabled{% endif %}>
                  </div>
                  <div class="d-flex flex-column">
                    <div class="fw-semibold">{{ emp.full_name }}</div>
                    <div class="text-muted small">
                      {{ emp.employee_code }}
                      {% if frozen %}
                        · <span class="badge bg-warning text-dark">Payroll Frozen</span>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </td>

              <!-- Day cells -->
              {% for cell in row.days %}
                {% set a = cell.record %}
                {% set remark = a.remarks if a else '' %}
                {% set is_manual = (a and (a.source in ['Manual','Bulk'])) %}
                <td class="p-0">
                  <div class="att-cell {% if is_manual %}manual-border{% endif %} {% if frozen %}disabled-cell{% endif %}">
                    <button type="button"
                            class="att-btn"
                            {% if not frozen %}data-toggle-form="1"{% endif %}>
                      {% if remark == 'Present' %}
                        <span class="badge bg-success w-100">P</span>
                      {% elif remark == 'Half Day' %}
                        <span class="badge bg-info text-dark w-100">H</span>
                      {% elif remark == 'Leave' %}
                        <span class="badge bg-warning text-dark w-100">L</span>
                      {% elif remark == 'Holiday' %}
                        <span class="badge bg-secondary w-100">Hd</span>
                      {% elif remark == 'Weekend' %}
                        <span class="badge bg-dark w-100">W</span>
                      {% elif remark == 'LWP' %}
                        <span class="badge bg-danger w-100">X</span>
                      {% else %}
                        <span class="text-muted small">—</span>
                      {% endif %}
                    </button>

                    {% if not frozen %}
                      <form method="post"
                            action="{{ url_for('attendance_summary.manual_update_attendance') }}"
                            class="quick-form d-none p-2">
                        <input type="hidden" name="employee_id" value="{{ emp.id }}">
                        <input type="hidden" name="date" value="{{ cell.date.strftime('%Y-%m-%d') }}">
                        <select name="remarks" class="form-select form-select-sm mb-1">
                          <option value=""           {% if remark=='' %}selected{% endif %}>—</option>
                          <option value="Present"    {% if remark=='Present' %}selected{% endif %}>Present</option>
                          <option value="Half Day"   {% if remark=='Half Day' %}selected{% endif %}>Half Day</option>
                          <option value="Leave"      {% if remark=='Leave' %}selected{% endif %}>Leave</option>
                          <option value="Holiday"    {% if remark=='Holiday' %}selected{% endif %}>Holiday</option>
                          <option value="Weekend"    {% if remark=='Weekend' %}selected{% endif %}>Weekend</option>
                          <option value="LWP"        {% if remark=='LWP' %}selected{% endif %}>LWP</option>
                        </select>
                        <input name="note" class="form-control form-control-sm mb-2"
                               placeholder="Comment (optional)"
                               value="{{ a.note if a and a.note }}">
                        <div class="d-flex gap-1">
                          <button class="btn btn-primary btn-sm w-100">Save</button>
                          <button class="btn btn-outline-secondary btn-sm w-100" type="button" data-cancel="1">Cancel</button>
                        </div>
                      </form>
                    {% endif %}
                  </div>
                </td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="alert alert-info">No employees found for this filter.</div>
  {% endif %}
</div>

<style>
  .att-cell { position: relative; padding: 2px; text-align: center; }
  .att-btn { width: 100%; padding: 6px 4px; border: 0; background: transparent; }
  .quick-form { background: #f8f9fa; border-top: 1px solid #e9ecef; }
  .manual-border { outline: 2px solid #a3d9a5; outline-offset: -2px; border-radius: 2px; }
  .disabled-cell { opacity: .6; cursor: not-allowed; }
  .disabled-cell .att-btn { pointer-events: none; }
</style>

<script>
  // Select all toggle
  const selAll = document.getElementById('selAll');
  const getChecks = () => Array.from(document.querySelectorAll('.emp-check:not(:disabled)'));
  if (selAll) {
    selAll.addEventListener('change', () => {
      getChecks().forEach(c => c.checked = selAll.checked);
    });
  }

  // Inject selected employee_ids into bulk form on submit
  const bulkForm = document.getElementById('bulkForm');
  const bulkHidden = document.getElementById('bulkHidden');
  if (bulkForm) {
    bulkForm.addEventListener('submit', (e) => {
      bulkHidden.innerHTML = '';
      const selected = getChecks().filter(c => c.checked).map(c => c.value);
      if (!selected.length) {
        e.preventDefault();
        alert('Please select at least one employee.');
        return;
      }
      selected.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'employee_ids';
        input.value = id;
        bulkHidden.appendChild(input);
      });
    });
  }

  // Cell quick editor open/close
  document.addEventListener('click', (e) => {
    // open
    const btn = e.target.closest('.att-btn');
    if (btn && btn.dataset.toggleForm === '1') {
      const cell = btn.closest('.att-cell');
      const form = cell.querySelector('.quick-form');
      if (form) {
        // Close any open forms in this row to reduce clutter
        cell.parentElement.parentElement
          .querySelectorAll('.quick-form')
          .forEach(f => { if (f !== form) f.classList.add('d-none'); });

        form.classList.toggle('d-none');
      }
    }

    // cancel
    const cancel = e.target.closest('[data-cancel]');
    if (cancel) {
      const form = cancel.closest('.quick-form');
      if (form) form.classList.add('d-none');
    }
  });
</script>
{% endblock %}