{% extends "pos/base.html" %}
{% block title %}{{ action }} Certificate{% endblock %}
{% block heading %}{{ action }} Staff Certificate{% endblock %}

{% block stylesheets %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" rel="stylesheet" />
<style>
  .section-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
  }
  .section-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
  }
  .section-header i { margin-right: 0.5rem; color: #666; }
  .section-body { padding: 1.25rem; }
  .form-label { font-weight: 500; color: #333; margin-bottom: 0.25rem; }
  .form-text { font-size: 0.8rem; color: #6c757d; }
  .required-star { color: #dc3545; }
  .readonly-field {
    background: #f8f9fa;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    color: #333;
  }
  .select2-container .select2-selection--single { height: calc(1.5em + 0.75rem + 2px) !important; }
  .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.75rem) !important; }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 0.75rem + 2px) !important; }
</style>
{% endblock %}

{% block content %}
<form method="post">
  {% csrf_token %}

  {% if errors %}
    <div class="alert alert-danger">
      <ul class="mb-0">
        {% for err in errors %}<li>{{ err }}</li>{% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="section-card">
    <div class="section-header"><i class="bi bi-person-badge"></i> Certificate details</div>
    <div class="section-body">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Staff member <span class="required-star">*</span></label>
          {% if action == 'Add' %}
            <select id="id_staff_t_id" name="staff_t_id" style="width: 100%;">
              {% if form_data.staff_t_id %}
                <option value="{{ form_data.staff_t_id }}" selected>{{ form_data.staff_display_name }}</option>
              {% endif %}
            </select>
            <input type="hidden" name="staff_display_name" id="id_staff_display_name" value="{{ form_data.staff_display_name }}">
          {% else %}
            <div class="readonly-field">{{ certificate.staff_name }}{% if certificate.employee_code %} ({{ certificate.employee_code }}){% endif %}</div>
            <div class="form-text">Staff can't be changed once a certificate is issued. Void this one and create a fresh certificate if needed.</div>
          {% endif %}
        </div>
        <div class="col-md-6">
          <label class="form-label">Certificate type <span class="required-star">*</span></label>
          {% if action == 'Add' %}
            <select class="form-select" name="certificate_type" id="id_certificate_type">
              {% for ct in certificate_types %}
                <option value="{{ ct.pk }}" {% if form_data.certificate_type == ct.pk|stringformat:"s" %}selected{% endif %}>{{ ct.name }}</option>
              {% endfor %}
            </select>
          {% else %}
            <div class="readonly-field">{{ certificate.certificate_type.name }}</div>
          {% endif %}
        </div>
        <div class="col-md-6">
          <label class="form-label">Issue date <span class="required-star">*</span></label>
          <input type="date" class="form-control" name="issue_date" id="id_issue_date" value="{{ form_data.issue_date }}" required>
        </div>
        {% if action == 'Edit' %}
        <div class="col-md-6">
          <label class="form-label">Certificate number</label>
          <div class="readonly-field">{{ certificate.certificate_no }}</div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="section-card">
    <div class="section-header"><i class="bi bi-pencil-square"></i> Remarks and wording</div>
    <div class="section-body">
      <div class="mb-3">
        <label class="form-label">Remarks</label>
        <textarea class="form-control" name="remarks" id="id_remarks" rows="2"
          placeholder="e.g. consistently professional, reliable, and well regarded by colleagues and management">{{ form_data.remarks }}</textarea>
        <div class="form-text">Your opinion of the employee's conduct — gets woven into the certificate wording below.</div>
      </div>

      <div class="d-flex justify-content-between align-items-center mb-2">
        <label class="form-label mb-0">Certificate wording</label>
        <button type="submit" name="action" value="preview" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-repeat"></i> Generate / regenerate wording
        </button>
      </div>
      <textarea class="form-control" name="body_text" id="id_body_text" rows="10">{{ form_data.body_text }}</textarea>
      <div class="form-text">This exact text is what gets printed. Regenerating overwrites anything typed here — edit remarks first, then regenerate, then fine-tune by hand if needed.</div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" name="action" value="save" class="btn btn-primary">
      <i class="bi bi-check-lg"></i> {% if action == 'Add' %}Create certificate{% else %}Save changes{% endif %}
    </button>
    <a href="{% url 'payroll:certificate_list' %}" class="btn btn-outline-secondary">Cancel</a>
  </div>
</form>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    {% if action == 'Add' %}
    $('#id_staff_t_id').select2({
        placeholder: 'Search staff by name...',
        allowClear: false,
        minimumInputLength: 0,
        ajax: {
            url: '{% url "payroll:staff_autocomplete" %}',
            dataType: 'json',
            delay: 250,
            data: function(params) { return { term: params.term }; },
            processResults: function(data) { return data; }
        }
    });
    $('#id_staff_t_id').on('select2:select', function(e) {
        $('#id_staff_display_name').val(e.params.data.text);
    });
    {% endif %}
});
</script>
{% endblock %}