{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width: 960px;">
  <h3 class="text-primary mb-3">
    <i class="bi bi-file-earmark-arrow-up me-2"></i>
    Upload Employee Document
  </h3>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for c, m in messages %}
        <div class="alert alert-{{ c }} alert-dismissible fade show" role="alert">
          {{ m }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <form method="POST" enctype="multipart/form-data" class="card shadow-sm border-0">
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-5">
          <label class="form-label fw-semibold">Employee</label>
          <select class="form-select" id="employee_id" name="employee_id" data-placeholder="Search name/code/email" required>
            <option value=""></option>
            {% if employees %}
              <!-- Optional: pre-render a few for initial UX (first page) -->
              {% for e in employees[:10] %}
                <option value="{{ e.id }}">{{ e.employee_code }} — {{ e.full_name }}{% if e.status %} ({{ e.status }}){% endif %}</option>
              {% endfor %}
            {% endif %}
          </select>
          <small class="text-muted">Type to search. All statuses included.</small>
        </div>

        <div class="col-md-4">
          <label class="form-label fw-semibold">Document Type</label>
          <select class="form-select" name="doc_type_id" required>
            <option value="">-- Select --</option>
            {% for t in doc_types %}
              <option value="{{ t.id }}">{{ t.name }} ({{ t.code }})</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">Issued On</label>
          <input type="date" class="form-control" name="issued_on">
        </div>

        <div class="col-md-8">
          <label class="form-label fw-semibold">Title</label>
          <input class="form-control" name="title" placeholder="e.g., Offer Letter - Nov 2025" required>
        </div>

        <div class="col-md-4">
          <label class="form-label fw-semibold">Valid Until</label>
          <input type="date" class="form-control" name="valid_until">
        </div>

        <div class="col-md-8">
          <label class="form-label fw-semibold">Notes</label>
          <input class="form-control" name="notes" placeholder="Optional remarks">
        </div>

        <div class="col-md-4">
          <label class="form-label fw-semibold">File</label>
          <input type="file" class="form-control" name="file" accept=".pdf,.png,.jpg,.jpeg,.webp,.doc,.docx" required>
          <div class="form-text">Max 20 MB (set via <code>MAX_CONTENT_LENGTH</code> in config).</div>
        </div>

        <div class="col-md-4">
          <div class="form-check mt-4">
            <input class="form-check-input" type="checkbox" name="is_private" id="is_private" checked>
            <label class="form-check-label" for="is_private">Private (visible to employee &amp; HR)</label>
          </div>
        </div>
      </div>
    </div>

    <div class="card-footer bg-light d-flex justify-content-end gap-2">
      <a class="btn btn-outline-secondary" href="{{ url_for('docs.list_documents') }}">
        <i class="bi bi-collection me-1"></i> Browse All
      </a>
      <button class="btn btn-primary">
        <i class="bi bi-upload me-1"></i> Upload
      </button>
    </div>
  </form>
</div>

<!-- Select2 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function () {
  $('#employee_id').select2({
    width: '100%',
    placeholder: $('#employee_id').data('placeholder') || 'Search employee…',
    allowClear: true,
    ajax: {
      url: "{{ url_for('docs.employee_search') }}",
      dataType: 'json',
      delay: 200,
      data: function (params) {
        return { q: params.term || '', page: params.page || 1, per_page: 20 };
      },
      processResults: function (data/*, params*/) {
        return { results: data.results || [] };
      }
    },
    minimumInputLength: 1
  });
});
</script>

<style>
/* Make Select2 look like Bootstrap 5 .form-select */
.select2-container { width:100% !important; }
.select2-container .select2-selection--single {
  height: calc(2.25rem + 2px);
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: .375rem;
  padding: .375rem .75rem;
  display: flex; align-items: center;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0; line-height: 1.5; color: inherit;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%; right: .5rem;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
  border-color: #86b7fe;
}
.select2-dropdown { border: 1px solid var(--bs-border-color, #ced4da); border-radius: .375rem; overflow: hidden; }
</style>
{% endblock %}