{% extends "base.html" %}

{% block title %}提早結束暫時規範{% endblock %}

{% block content %}
<h2 class="mb-4">提早結束暫時規範</h2>

<div class="card">
  <div class="card-header">
    規範編號: <strong>{{ spec.spec_code }}</strong>
  </div>
  <div class="card-body">
    <form method="post">
      <p><strong>主題:</strong> {{ spec.title }}</p>
      <div class="alert alert-warning">
        執行此操作將會立即終止這份暫時規範，狀態將變為「已終止」，結束日期會更新為今天。
      </div>
      <div class="mb-3">
        <label for="reason" class="form-label"><strong>提早結束原因</strong></label>
        <textarea class="form-control" id="reason" name="reason" rows="4" required></textarea>
      </div>

      <!-- 郵件通知對象選擇 -->
      <div class="mb-3">
        <label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
        {% if saved_emails %}
        <div class="alert alert-info mb-2">
          <small>以下為生效時設定的通知對象，您可以直接使用或進行編輯。</small>
        </div>
        {% endif %}
        <select id="recipients" name="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
        </select>
        <div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
      </div>

      <button type="submit" class="btn btn-danger">確認終止</button>
      <a href="{{ url_for('temp_spec.spec_list') }}" class="btn btn-secondary">取消</a>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 預先載入已儲存的郵件清單
    {% if saved_emails %}
    const savedEmails = "{{ saved_emails }}".split(';').filter(email => email.trim());
    {% else %}
    const savedEmails = [];
    {% endif %}
    
    const recipientSelect = new TomSelect('#recipients', {
        valueField: 'value',
        labelField: 'text',
        searchField: 'text',
        placeholder: '請輸入姓名或 Email 來搜尋...',
        plugins: ['remove_button'],
        maxItems: null,
        create: false,
        load: function(query, callback) {
            if (!query || query.length < 2) {
                callback();
                return;
            }
            
            fetch(`/api/ldap-search?q=${encodeURIComponent(query)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    callback(data);
                })
                .catch(error => {
                    console.error('LDAP search error:', error);
                    callback();
                });
        },
        onItemAdd: function(value, item) {
            // 選擇項目後清空搜尋框
            this.setTextboxValue('');
            this.refreshOptions(false);
        },
        render: {
            option: function(item, escape) {
                return `<div class="py-1">${escape(item.text)}</div>`;
            },
            item: function(item, escape) {
                // 移除藍底背景，改用淺灰背景
                return `<div class="badge bg-light text-dark border me-1">${escape(item.text)}</div>`;
            }
        }
    });
    
    // 預填已儲存的郵件
    if (savedEmails.length > 0) {
        savedEmails.forEach(email => {
            const trimmedEmail = email.trim();
            if (trimmedEmail) {
                recipientSelect.addOption({value: trimmedEmail, text: trimmedEmail});
                recipientSelect.addItem(trimmedEmail);
            }
        });
    }
});
</script>
{% endblock %}