{% 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" enctype="multipart/form-data">
      <p><strong>主題:</strong> {{ spec.title }}</p>
      <p><strong>原結束日期:</strong> {{ spec.end_date.strftime('%Y-%m-%d') }}</p>
      
      <div class="mb-3">
        <label for="new_end_date" class="form-label"><strong>新的結束日期</strong></label>
        <input type="date" class="form-control" id="new_end_date" name="new_end_date" 
               value="{{ default_new_end_date.strftime('%Y-%m-%d') }}" required>
        <div class="form-text">預設為原結束日期後一個月。</div>
      </div>

      <div class="mb-3">
        <label for="new_file" class="form-label"><strong>重新上傳佐證檔案 (必填)</strong></label>
        <input class="form-control" type="file" id="new_file" name="new_file" accept=".pdf" required>
        <div class="form-text">請上傳展延申請的相關佐證文件 (PDF 格式)。</div>
      </div>

      <!-- 郵件通知對象選擇 -->
      <div class="mb-3">
        <label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
        <select id="recipients" name="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
        </select>
        <div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
      </div>

      <button type="submit" class="btn btn-primary">確認展延</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() {
    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>`;
            }
        }
    });
});
</script>
{% endblock %}