{% extends "pos/base.html" %}
{% block title %}Attendance – {{ chosen_date }}{% endblock %}

{% block heading %}Attendance: {{ chosen_date }}{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between">
    <a href="{% url 'payroll:attendance_upload' %}?date={{ chosen_date }}" class="btn btn-secondary">
      Bulk Upload (Excel)
    </a>
  </div>

  <!-- Complete Month Attendance Button -->
  <form method="post" action="{% url 'payroll:attendance_complete_month' %}" class="mb-3">
    {% csrf_token %}
    <input type="hidden" name="date" value="{{ chosen_date }}">
    <button type="submit" class="btn btn-warning">
      Complete Month Attendance
    </button>
  </form>



  <!-- Date Picker Form -->
  <form method="get" action="{% url 'payroll:attendance_list' %}" class="row g-3 mb-4">
    <div class="col-auto">
      <label for="att_date" class="col-form-label">Select Date:</label>
    </div>
    <div class="col-auto">
      <input 
        type="date" 
        id="att_date" 
        name="date" 
        value="{{ chosen_date }}" 
        class="form-control"
      >
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Go</button>
    </div>
  </form>

  <!-- Attendance Entry Form -->
  <form method="post" action="{% url 'payroll:attendance_save' %}">
    {% csrf_token %}
    <input type="hidden" name="date" value="{{ chosen_date }}">

    <div class="table-responsive">
      <table class="table table-hover table-bordered align-middle">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th class="text-center">Present</th>
            <th>Check-In <small class="text-muted">(optional)</small></th>
            <th>Check-Out <small class="text-muted">(optional)</small></th>
          </tr>
        </thead>
        <tbody>
          {% for row in attendance_rows %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ row.staff.name }}</td>
            <td class="text-center">
              <input
                class="form-check-input"
                type="checkbox"
                name="present_{{ row.staff.id }}"
                {% if row.present %}checked{% endif %}
              >
            </td>
            <td>
              <input
                type="time"
                name="checkin_{{ row.staff.id }}"
                class="form-control form-control-sm"
                value="{% if row.check_in %}{{ row.check_in|time:'H:i' }}{% endif %}"
              >
            </td>
            <td>
              <input
                type="time"
                name="checkout_{{ row.staff.id }}"
                class="form-control form-control-sm"
                value="{% if row.check_out %}{{ row.check_out|time:'H:i' }}{% endif %}"
              >
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <button type="submit" class="btn btn-success">Save Attendance</button>
  </form>
{% endblock %}