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

<div class="container-fluid py-3">

  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <div>
      <h4 class="mb-0">Team Attendance</h4>
      <small class="text-muted">
        Month: <b>{{ month_str }}</b>
        {% if month_frozen %}
          <span class="badge bg-danger ms-2">Frozen</span>
        {% else %}
          <span class="badge bg-success ms-2">Editable</span>
        {% endif %}
      </small>
    </div>
  </div>

  <!-- Filters -->
  <form method="get" class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">

        <div class="col-md-2">
          <label class="form-label">Month</label>
          <input type="month" name="month" value="{{ month_str }}" class="form-control">
        </div>

        <div class="col-md-3">
          <label class="form-label">Search</label>
          <input type="text" name="search" value="{{ filters.search }}" class="form-control"
                 placeholder="Name / Code / Email">
        </div>

        <div class="col-md-3">
          <label class="form-label">Department</label>
          <select name="department_id" class="form-select">
            <option value="">All</option>
            {% for d in dept_list %}
              <option value="{{ d.id }}" {% if filters.department_id|string == d.id|string %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {% if is_hr_or_admin %}
        <div class="col-md-3">
          <label class="form-label">Reporting Manager</label>
          <select name="manager_id" class="form-select">
            <option value="">All</option>
            {% for m in managers_list %}
              <option value="{{ m.id }}" {% if filters.manager_id|string == m.id|string %}selected{% endif %}>
                {{ m.full_name }} ({{ m.employee_code }})
              </option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        <div class="col-md-1 d-grid">
          <button class="btn btn-primary">Apply</button>
        </div>

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

  {% if team_cards|length == 0 %}
    <div class="alert alert-warning">No employees found for selected filters.</div>
  {% else %}

  <div class="accordion" id="teamAttendanceAccordion">
    {% for card in team_cards %}
      {% set emp = card.employee %}
      <div class="accordion-item mb-2 shadow-sm">
        <h2 class="accordion-header" id="heading{{ emp.id }}">
          <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse" data-bs-target="#collapse{{ emp.id }}"
                  aria-expanded="false" aria-controls="collapse{{ emp.id }}">
            <div class="d-flex flex-column flex-md-row w-100 justify-content-between gap-2">
              <div>
                <b>{{ emp.full_name }}</b>
                <span class="text-muted">({{ emp.employee_code }})</span>
                {% if emp.department %}<span class="badge bg-light text-dark ms-2">{{ emp.department.name }}</span>{% endif %}
                {% if emp.designation %}<span class="badge bg-light text-dark ms-1">{{ emp.designation.title }}</span>{% endif %}
              </div>
              <div class="text-muted small">
                Manager:
                {% if emp.reporting_manager %}{{ emp.reporting_manager.full_name }}{% else %}-{% endif %}
                · Location: {{ emp.location or "-" }}
              </div>
            </div>
          </button>
        </h2>

        <div id="collapse{{ emp.id }}" class="accordion-collapse collapse"
             aria-labelledby="heading{{ emp.id }}" data-bs-parent="#teamAttendanceAccordion">
          <div class="accordion-body">

            <div class="table-responsive">
              <table class="table table-bordered align-middle">
                <thead class="table-light">
                  <tr>
                    <th style="min-width:120px;">Date</th>
                    <th style="min-width:120px;">Status</th>
                    <th style="min-width:120px;">Check-in</th>
                    <th style="min-width:120px;">Check-out</th>
                    <th style="min-width:90px;">Hours</th>
                    <th style="min-width:120px;">Source</th>
                    <th>Remarks</th>
                    <th style="min-width:120px;">Action</th>
                  </tr>
                </thead>
                <tbody>
                {% for cell in card.days %}
                  {% set d = cell.date %}
                  {% set att = cell.att %}
                  {% set leave = cell.leave %}
                  {% set holiday = cell.holiday %}
                  {% set is_weekend = cell.is_weekend %}

                  {% set display_status = "" %}
                  {% set badge = "bg-secondary" %}
                  {% set icon = "fa-circle-question" %}

                  {% if holiday %}
                    {% set display_status = "Holiday" %}
                    {% set badge = "bg-info" %}
                    {% set icon = "fa-umbrella-beach" %}
                  {% elif is_weekend %}
                    {% set display_status = "Weekend" %}
                    {% set badge = "bg-dark" %}
                    {% set icon = "fa-calendar-days" %}
                  {% elif leave %}
                    {% set display_status = leave.leave_type ~ (" (Half)" if leave.half_day else "") %}
                    {% set badge = "bg-primary" %}
                    {% set icon = "fa-plane-departure" %}
                  {% elif att %}
                    {% set s = (att.status or "")|lower %}
                    {% if s in ["present","p"] %}
                      {% set display_status = "Present" %}
                      {% set badge = "bg-success" %}
                      {% set icon = "fa-circle-check" %}
                    {% elif s in ["half day","half_day","halfday","hd"] %}
                      {% set display_status = "Half Day" %}
                      {% set badge = "bg-warning" %}
                      {% set icon = "fa-circle-half-stroke" %}
                    {% elif s in ["lop","lwp","absent","a"] %}
                      {% set display_status = s|upper %}
                      {% set badge = "bg-danger" %}
                      {% set icon = "fa-circle-xmark" %}
                    {% else %}
                      {% set display_status = att.status %}
                      {% set badge = "bg-secondary" %}
                      {% set icon = "fa-circle-question" %}
                    {% endif %}
                  {% else %}
                    {% set display_status = "-" %}
                    {% set badge = "bg-light text-dark" %}
                    {% set icon = "fa-minus" %}
                  {% endif %}

                  <tr>
                    <td>
                      <b>{{ d.strftime("%d-%b-%Y") }}</b>
                      <div class="text-muted small">{{ d.strftime("%a") }}</div>
                    </td>

                    <td>
                      <span class="badge {{ badge }}"
                        data-bs-toggle="tooltip"
                        data-bs-title="
                          {% if holiday %}{{ holiday }}{% endif %}
                          {% if is_weekend %}Weekend{% endif %}
                          {% if leave %}Leave: {{ leave.leave_type }}{% endif %}
                          {% if att %}
                            Status: {{ att.status }} | Source: {{ att.source or '-' }}
                            | In: {{ att.check_in_time or '-' }} | Out: {{ att.check_out_time or '-' }}
                            | Hours: {{ att.working_hours or 0 }}
                            | Remarks: {{ att.remarks or '-' }}
                          {% endif %}
                        ">
                        <i class="fa-solid {{ icon }} me-1"></i>{{ display_status }}
                      </span>
                    </td>

                    <td>{{ att.check_in_time if att and att.check_in_time else "-" }}</td>
                    <td>{{ att.check_out_time if att and att.check_out_time else "-" }}</td>
                    <td>{{ "%.2f"|format(att.working_hours) if att else "-" }}</td>
                    <td>{{ att.source if att and att.source else "-" }}</td>
                    <td>
                      {% if holiday %}
                        <span class="text-muted">{{ holiday }}</span>
                      {% elif att and att.remarks %}
                        {{ att.remarks }}
                      {% elif leave %}
                        <span class="text-muted">On Leave</span>
                      {% else %}
                        -
                      {% endif %}
                    </td>

                    <td>
                      {% if month_frozen %}
                        <button class="btn btn-sm btn-outline-secondary" disabled>
                          Frozen
                        </button>
                      {% else %}
                        {% if is_hr_or_admin or (emp.reporting_manager_id == current_user.id) %}
                          <button
                            class="btn btn-sm btn-outline-primary"
                            onclick="openEditModal({{ emp.id }}, '{{ d.isoformat() }}', {{ 'true' if att else 'false' }}, '{{ (att.status if att else '')|e }}', '{{ (att.source if att else '')|e }}', '{{ (att.remarks if att else '')|e }}', '{{ (att.note if att else '')|e }}', '{{ (att.check_in_time.strftime('%H:%M') if att and att.check_in_time else '')|e }}', '{{ (att.check_out_time.strftime('%H:%M') if att and att.check_out_time else '')|e }}', '{{ (att.working_hours if att else '')|e }}')">
                            Edit
                          </button>
                        {% else %}
                          <span class="text-muted small">No access</span>
                        {% endif %}
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  {% endif %}
</div>

<!-- Edit Modal -->
<div class="modal fade" id="attEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Update Attendance</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <input type="hidden" id="m_employee_id">
        <input type="hidden" id="m_date">

        <div class="row g-2">
          <div class="col-md-4">
            <label class="form-label">Status</label>
            <select id="m_status" class="form-select">
              <option value="">(keep)</option>
              <option value="present">Present</option>
              <option value="half_day">Half Day</option>
              <option value="absent">Absent</option>
              <option value="lop">LOP/LWP</option>
              <option value="paid_leave">Paid Leave</option>
            </select>
          </div>

          <div class="col-md-4">
            <label class="form-label">Source</label>
            <input id="m_source" class="form-control" placeholder="Manual / Punch / Desktime">
          </div>

          <div class="col-md-4">
            <label class="form-label">Working Hours</label>
            <input id="m_hours" type="number" step="0.01" class="form-control" placeholder="e.g. 8.5">
          </div>

          <div class="col-md-4">
            <label class="form-label">Check-in (HH:MM)</label>
            <input id="m_checkin" class="form-control" placeholder="09:30">
          </div>

          <div class="col-md-4">
            <label class="form-label">Check-out (HH:MM)</label>
            <input id="m_checkout" class="form-control" placeholder="18:45">
          </div>

          <div class="col-md-12">
            <label class="form-label">Remarks</label>
            <input id="m_remarks" class="form-control" placeholder="Optional remarks">
          </div>

          <div class="col-md-12">
            <label class="form-label">Note (internal)</label>
            <textarea id="m_note" rows="2" class="form-control" placeholder="Internal note..."></textarea>
          </div>
        </div>

        <div class="alert alert-info mt-3 mb-0">
          Tip: If you enter check-in/out and leave Working Hours empty, it will auto-calc hours.
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" onclick="saveAttendance()">Save</button>
      </div>
    </div>
  </div>
</div>

<script>
  // Bootstrap tooltips
  document.addEventListener("DOMContentLoaded", function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  });

  function openEditModal(employeeId, dateStr, hasAtt, status, source, remarks, note, checkin, checkout, hours) {
    document.getElementById("m_employee_id").value = employeeId;
    document.getElementById("m_date").value = dateStr;

    document.getElementById("m_status").value = status || "";
    document.getElementById("m_source").value = source || "Manual";
    document.getElementById("m_remarks").value = remarks || "";
    document.getElementById("m_note").value = note || "";
    document.getElementById("m_checkin").value = checkin || "";
    document.getElementById("m_checkout").value = checkout || "";
    document.getElementById("m_hours").value = hours || "";

    new bootstrap.Modal(document.getElementById('attEditModal')).show();
  }

  async function saveAttendance() {
    const payload = {
      employee_id: document.getElementById("m_employee_id").value,
      date: document.getElementById("m_date").value,
      status: document.getElementById("m_status").value,
      source: document.getElementById("m_source").value,
      remarks: document.getElementById("m_remarks").value,
      note: document.getElementById("m_note").value,
      check_in_time: document.getElementById("m_checkin").value,
      check_out_time: document.getElementById("m_checkout").value,
      working_hours: document.getElementById("m_hours").value
    };

    const res = await fetch("{{ url_for('team_attendance.team_attendance_update') }}", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(payload)
    });

    const out = await res.json().catch(() => ({}));
    if (!res.ok || !out.ok) {
      alert(out.message || "Update failed");
      return;
    }
    window.location.reload();
  }
</script>

{% endblock %}