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

{% set role_name = (current_user.role.name|lower if current_user.role and current_user.role.name else '') %}

{% if role_name in ['admin', 'hr admin', 'hr manager', 'hr'] %}
  <!-- Run unified attendance engine (same as cron) -->
  <div class="mb-3">
    <button id="btnRunEngine" class="btn btn-primary">
      <i class="bi bi-cpu-fill me-1"></i> Run Attendance Engine (All Employees, till today)
    </button>
    <span id="runEngineSpinner" class="ms-2 d-none">⏳</span>
    <div id="runEngineAlert" class="alert mt-2 d-none" role="alert"></div>
  </div>
{% endif %}

<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" type="button">
    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 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) {
      // Keep the month picker in sync with the visible calendar month
      const d = info.view.currentStart || info.start || new Date();
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const monthPicker = document.getElementById('monthPicker');
      if (monthPicker) {
        monthPicker.value = `${year}-${month}`;
      }
    }
  });

  calendar.render();

  // ---------------------------
  // Apply weekends & holidays
  // ---------------------------
  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: reload to reflect weekend/holiday changes
      // 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;
    }
  });

  // ---------------------------
  // Run unified attendance engine (same as cron)
  // ---------------------------
  const btnRunEngine = document.getElementById('btnRunEngine');
  if (btnRunEngine) {
    const spinner = document.getElementById('runEngineSpinner');
    const alertBox = document.getElementById('runEngineAlert');

    btnRunEngine.addEventListener('click', async () => {
      alertBox.classList.add('d-none');
      spinner.classList.remove('d-none');
      btnRunEngine.disabled = true;

      const originalHtml = btnRunEngine.innerHTML;
      btnRunEngine.innerHTML =
        '<span class="spinner-border spinner-border-sm me-2"></span>Processing…';

      try {
        const res = await fetch('/attendance-admin/run-now', { method: 'POST' });
        const json = await res.json();

        if (json.ok) {
          alertBox.className = 'alert alert-success';
          alertBox.innerHTML = '✅ Attendance engine executed successfully. ' +
            'You may refresh the page to see updated records.';
        } else {
          alertBox.className = 'alert alert-danger';
          alertBox.textContent = '❌ Error: ' + (json.error || 'Unknown error');
        }
        alertBox.classList.remove('d-none');
      } catch (e) {
        alertBox.className = 'alert alert-danger';
        alertBox.textContent = '⛔ ' + e.message;
        alertBox.classList.remove('d-none');
      } finally {
        spinner.classList.add('d-none');
        btnRunEngine.disabled = false;
        btnRunEngine.innerHTML = originalHtml;
      }
    });
  }
});
</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>
{% endblock %}