{% extends 'base.html' %}
{% block content %}
<h3>📅 Attendance Overview</h3>

<form id="processForm" action="{{ url_for('attendance.process_monthly_attendance') }}" method="post" class="d-inline">
  <input type="month" id="selected_month" name="selected_month" required hidden>

  {% if current_user.role.name|lower == 'admin' %}
    <div class="input-group mb-3" style="max-width:520px;">
      <label class="input-group-text" for="empSelect">Employee</label>
      <select class="form-select" id="empSelect" name="employee_id" required>
        <option value="" disabled selected>Choose…</option>
        {% for e in employees %}
          <option value="{{ e.id }}">{{ e.full_name }} ({{ e.employee_code }})</option>
        {% endfor %}
      </select>
      <button id="processBtn" class="btn btn-primary" type="submit">
        <i class="bi bi-gear-fill me-1"></i> Process Monthly (till today)
      </button>
    </div>
  {% else %}
    <input type="hidden" name="employee_id" value="{{ self_employee_id }}">
    <button id="processBtn" class="btn btn-primary mb-3" type="submit">
      <i class="bi bi-gear-fill me-1"></i> Process My Attendance (till today)
    </button>
  {% endif %}
</form>

<div class="d-flex gap-2 align-items-end mb-3">
  <form id="monthForm" class="d-flex gap-2">
    <div>
      <label class="form-label mb-1">Month</label>
      <input type="month" id="monthPicker" name="month" class="form-control" value="{{ '%04d-%02d'|format(year, month) }}">
    </div>
  </form>
  <button id="btnApplyCal" class="btn btn-outline-primary">
    Apply Weekends & Holidays
  </button>
  <span id="applyCalSpinner" class="ms-2 d-none">⏳</span>
</div>

<div id="applyCalAlert" class="alert d-none" role="alert"></div>

<div id="calendar"></div>

<!-- FullCalendar & Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('calendar');
  const selectedMonthInput = document.getElementById('selected_month');
  const processForm = document.getElementById('processForm');
  const processBtn = document.getElementById('processBtn');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: new Date(),
    showNonCurrentDates: false,
    fixedWeekCount: false,
    height: 'auto',
    headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth' },
    validRange: { start: '{{ fy_start }}-04-01', end: '{{ fy_end }}-03-31' },
    events: {{ events|tojson|safe }},
    eventDidMount: function(info) {
      if (info.event.extendedProps.tooltip) {
        new bootstrap.Popover(info.el, {
          title: 'Details',
          content: info.event.extendedProps.tooltip.replace(/\\n/g, '<br>'),
          placement: 'top', trigger: 'hover', html: true, container: 'body'
        });
      }
    },
    datesSet: function(info) {
      // Use the current view's anchor date to derive the active month
      const d = info.view.currentStart || info.start || new Date();
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      selectedMonthInput.value = `${year}-${month}`;
    }
  });
  calendar.render();

  // Loading state on submit
  if (processForm) {
    processForm.addEventListener('submit', function () {
      if (processBtn) {
        processBtn.disabled = true;
        const orig = processBtn.innerHTML;
        processBtn.dataset.orig = orig;
        processBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing…';
      }
    });
  }
});
</script>

<!-- Legend -->
<div class="mt-3">
    <strong>Legend:</strong>
    <span class="badge bg-success">✅ Present</span>
    <span class="badge bg-info text-dark">🌓 Half Day</span>
    <span class="badge bg-primary">✈️ Approved Leave</span>
    <span class="badge bg-warning text-dark">🎉 Public Holiday</span>
    <span class="badge bg-secondary">🎓 Weekend Off</span>
    <span class="badge bg-danger">❌ LWP</span>
</div>

<script>
document.getElementById('btnApplyCal').addEventListener('click', async () => {
  const month = document.getElementById('monthPicker').value;
  const spinner = document.getElementById('applyCalSpinner');
  const alertBox = document.getElementById('applyCalAlert');

  if (!month) {
    alertBox.className = 'alert alert-warning';
    alertBox.textContent = 'Please choose a month first.';
    alertBox.classList.remove('d-none');
    return;
  }

  alertBox.classList.add('d-none');
  spinner.classList.remove('d-none');
  document.getElementById('btnApplyCal').disabled = true;

  try {
    const res = await fetch('/attendance/apply-month-calendar', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ month })
    });
    const json = await res.json();

    if (!res.ok || !json.ok) {
      throw new Error(json.error || 'Failed to apply calendar');
    }

    alertBox.className = 'alert alert-success';
    alertBox.innerHTML = `✅ Applied to <b>${json.employees}</b> employees. Created <b>${json.rows_created}</b>, updated <b>${json.rows_updated}</b> rows for <b>${json.month}</b>.`;
    alertBox.classList.remove('d-none');

    // Optional: refresh the calendar view
    // location.reload();

  } catch (e) {
    alertBox.className = 'alert alert-danger';
    alertBox.textContent = 'Error: ' + e.message;
    alertBox.classList.remove('d-none');
  } finally {
    spinner.classList.add('d-none');
    document.getElementById('btnApplyCal').disabled = false;
  }
});
</script>
{% endblock %}