{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 900px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-sliders me-2"></i>
      Attendance Source Priority
    </h4>
    <a href="{{ url_for('employee.dashboard') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left-circle me-1"></i> Back to Dashboard
    </a>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-light">
      <strong>Attendance Engine JSON</strong>
    </div>
    <div class="card-body">
      <p class="text-muted small">
        Configure how daily attendance should be calculated when multiple data sources are available
        (Manual, Biometric, Self punch, Desktime logs, etc.).
      </p>

      <form method="POST">
        {{ csrf_token() if csrf_token is defined }}

        <div class="mb-3">
          <label for="priority_json" class="form-label fw-semibold">
            Attendance Engine JSON
          </label>
          <textarea
            id="priority_json"
            name="priority_json"
            class="form-control font-monospace"
            rows="14"
          >{{ priority_json }}</textarea>
          <div class="form-text">
            Store under key <code>attendance_source_priority</code> in <code>SystemSetting</code>.
            Must be valid JSON.
          </div>
        </div>

        <!-- Quick presets -->
        <div class="mb-3">
          <label class="form-label fw-semibold">Quick presets</label>
          <div class="btn-group flex-wrap" role="group">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setPreset('hybrid')">
              Hybrid (Biometric → Desktime hours → Manual)
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setPreset('wfo')">
              WFO (Biometric only, Manual fallback)
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setPreset('wfh')">
              WFH (Desktime only, Manual fallback)
            </button>
          </div>
          <div class="form-text">
            Clicking a preset will overwrite the textarea content. You can still tweak it manually.
          </div>
        </div>

        <div class="text-end">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save Settings
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Example (read-only, note: NO name attribute) -->
  <div class="card shadow-sm mt-3">
    <div class="card-header bg-light">
      <strong>Example structure</strong>
    </div>
    <div class="card-body">
      <pre class="mb-0 small">
{
  "default": {
    "order": ["manual", "biometric", "self", "desktime_hours", "desktime_productive"],
    "min_hours_present": 7.5,
    "min_hours_half_day": 4
  },
  "WFH": {
    "order": ["manual", "desktime_productive"],
    "min_hours_present": 7,
    "min_hours_half_day": 4
  }
}
      </pre>
    </div>
  </div>
</div>

<script>
function setPreset(which) {
  const textarea = document.getElementById('priority_json');
  let obj;

  if (which === 'hybrid') {
    obj = {
      "default": {
        "order": ["manual", "biometric", "self", "desktime_hours", "desktime_productive"],
        "min_hours_present": 7.5,
        "min_hours_half_day": 4
      }
    };
  } else if (which === 'wfo') {
    obj = {
      "default": {
        "order": ["manual", "biometric"],
        "min_hours_present": 8.5,
        "min_hours_half_day": 4.5
      }
    };
  } else if (which === 'wfh') {
    obj = {
      "default": {
        "order": ["manual", "desktime_productive"],
        "min_hours_present": 7,
        "min_hours_half_day": 4
      }
    };
  } else {
    return;
  }

  textarea.value = JSON.stringify(obj, null, 2);
}
</script>
{% endblock %}