{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1200px;">

  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0"><i class="bi bi-gift me-2"></i> Birthday Reminders</h4>
      <div class="text-muted small">Trigger birthday reminder emails and view delivery logs.</div>
    </div>

    <div class="d-flex gap-2">
      <div class="input-group input-group-sm" style="width: 220px;">
        <span class="input-group-text">Lead days</span>
        <input type="number" min="0" max="30" class="form-control" id="lead_days" value="2">
      </div>
      <button class="btn btn-sm btn-primary" id="run_btn">
        <i class="bi bi-send me-1"></i> Run Now
      </button>
    </div>
  </div>

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

  {% if latest %}
  <div class="card shadow-sm mb-3">
    <div class="card-body d-flex justify-content-between align-items-center">
      <div>
        <div class="fw-semibold">Last Sent</div>
        <div class="text-muted small">
          {{ latest.sent_at }} · Target: {{ latest.target_date }} · Subject: {{ latest.subject }}
        </div>
      </div>
      <span class="badge text-bg-secondary">Year {{ latest.year }}</span>
    </div>
  </div>
  {% endif %}

  <!-- Filters -->
  <form class="card shadow-sm mb-3" method="GET">
    <div class="card-header bg-light fw-semibold">Filters</div>
    <div class="card-body row g-3 align-items-end">
      <div class="col-md-3">
        <label class="form-label">Search (subject/recipients)</label>
        <input class="form-control" name="q" value="{{ q or '' }}" placeholder="e.g. manager@, subject...">
      </div>

      <div class="col-md-2">
        <label class="form-label">Year</label>
        <input class="form-control" name="year" type="number" value="{{ year or '' }}" placeholder="2025">
      </div>

      <div class="col-md-3">
        <label class="form-label">Employee</label>
        <select class="form-select" name="employee_id">
          <option value="">All</option>
          {% for e in employees %}
            <option value="{{ e.id }}" {% if emp_id and emp_id == e.id %}selected{% endif %}>
              {{ e.full_name }}{% if e.employee_code %} ({{ e.employee_code }}){% endif %}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label">Target From</label>
        <input class="form-control" type="date" name="date_from" value="{{ date_from or '' }}">
      </div>

      <div class="col-md-2">
        <label class="form-label">Target To</label>
        <input class="form-control" type="date" name="date_to" value="{{ date_to or '' }}">
      </div>

      <div class="col-md-2">
        <label class="form-label">Per page</label>
        <select class="form-select" name="per_page">
          {% for n in [10,20,50,100] %}
            <option value="{{ n }}" {% if per_page == n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-10 d-flex gap-2">
        <button class="btn btn-primary"><i class="bi bi-funnel me-1"></i> Apply</button>
        <a class="btn btn-outline-secondary" href="{{ url_for('birthday_tools.dashboard') }}">Reset</a>
      </div>
    </div>
  </form>

  <!-- Logs Table -->
  <div class="card shadow-sm">
    <div class="card-header bg-light fw-semibold">Logs</div>
    <div class="table-responsive">
      <table class="table table-bordered table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width: 150px;">Sent At</th>
            <th style="width: 120px;">Target Date</th>
            <th style="width: 80px;">Year</th>
            <th style="width: 220px;">Employee</th>
            <th>Subject</th>
            <th style="width: 280px;">Recipients</th>
          </tr>
        </thead>
        <tbody>
          {% for row in logs %}
          <tr>
            <td class="small text-muted">{{ row.sent_at }}</td>
            <td><span class="badge text-bg-info">{{ row.target_date }}</span></td>
            <td>{{ row.year }}</td>
            <td>
              {% set emp = row.employee %}
              <div class="fw-semibold">{{ emp.full_name if emp else ('ID ' ~ row.employee_id) }}</div>
              <div class="text-muted small">
                {% if emp and emp.employee_code %}{{ emp.employee_code }}{% endif %}
              </div>
            </td>
            <td class="small">{{ row.subject }}</td>
            <td class="small text-muted" style="max-width: 320px; white-space: normal;">
              {{ row.recipients }}
            </td>
          </tr>
          {% endfor %}
          {% if not logs %}
          <tr>
            <td colspan="6" class="text-center text-muted py-4">No logs found.</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if pagination.pages > 1 %}
    <div class="card-body d-flex justify-content-between align-items-center">
      <div class="text-muted small">
        Page {{ pagination.page }} of {{ pagination.pages }} · Total {{ pagination.total }}
      </div>

      <nav>
        <ul class="pagination pagination-sm mb-0">
          <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('birthday_tools.dashboard', page=pagination.prev_num, q=q, year=year, employee_id=emp_id, date_from=date_from, date_to=date_to, per_page=per_page) }}">Prev</a>
          </li>
          <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('birthday_tools.dashboard', page=pagination.next_num, q=q, year=year, employee_id=emp_id, date_from=date_from, date_to=date_to, per_page=per_page) }}">Next</a>
          </li>
        </ul>
      </nav>
    </div>
    {% endif %}
  </div>
</div>

<script>
  (function () {
    const btn = document.getElementById('run_btn');
    const alertBox = document.getElementById('run_alert');
    const leadDays = document.getElementById('lead_days');

    function showAlert(type, text) {
      alertBox.className = `alert alert-${type}`;
      alertBox.textContent = text;
      alertBox.classList.remove('d-none');
    }

    btn.addEventListener('click', async () => {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Running...';

      try {
        const fd = new FormData();
        fd.append('lead_days', leadDays.value || '2');

        const res = await fetch('{{ url_for("birthday_tools.run_now") }}', {
          method: 'POST',
          body: fd,
          credentials: 'same-origin'
        });

        const data = await res.json();
        if (!data.ok) throw new Error(data.error || 'Failed');

        showAlert('success', `Done! Sent=${data.sent}, Skipped=${data.skipped}. Refreshing...`);
        setTimeout(() => window.location.reload(), 800);
      } catch (e) {
        showAlert('danger', `Error: ${e.message}`);
      } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-send me-1"></i> Run Now';
      }
    });
  })();
</script>
{% endblock %}