{% 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>
      <div class="alert alert-info">
        請上傳已經過完整簽核的 PDF 檔案。上傳後，此規範的狀態將變為「生效」。
      </div>
      <div class="mb-3">
        <label for="signed_file" class="form-label"><strong>已簽核的 PDF 檔案</strong></label>
        <input class="form-control" type="file" id="signed_file" name="signed_file" accept=".pdf" required>
      </div>
      
      <!-- 郵件通知對象選擇 -->
      <div class="mb-3">
        <label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
        <select id="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
        </select>
        <input type="hidden" id="recipients-hidden" name="recipients" value="" />
        <div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
      </div>
      
      <button type="button" class="btn btn-success" onclick="submitFormWithDebug()">上傳並啟用</button>
      <a href="{{ url_for('temp_spec.spec_list') }}" class="btn btn-secondary">取消</a>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function updateHiddenField() {
    if (window.recipientTomSelect) {
        const selectedValues = window.recipientTomSelect.getValue();
        const hiddenField = document.getElementById('recipients-hidden');
        hiddenField.value = Array.isArray(selectedValues) ? selectedValues.join(',') : selectedValues;
        console.log('[DEBUG] 更新隱藏字段:', hiddenField.value);
    }
}

function submitFormWithDebug() {
    // 確保隱藏字段有最新的值
    updateHiddenField();
    
    const recipientSelect = document.getElementById('recipients');
    const hiddenField = document.getElementById('recipients-hidden');
    const selectedValues = Array.from(recipientSelect.selectedOptions).map(option => option.value);
    
    console.log('[FORM DEBUG] 表單提交時選中的收件者:', selectedValues);
    console.log('[FORM DEBUG] Recipients input value:', recipientSelect.value);
    console.log('[FORM DEBUG] Hidden field value:', hiddenField.value);
    
    // 確認 Tom Select 的值
    if (window.recipientTomSelect) {
        console.log('[FORM DEBUG] Tom Select getValue():', window.recipientTomSelect.getValue());
    }
    
    // 發送除錯資訊到後端
    const debugData = {
        selectedValues: selectedValues,
        recipientValue: recipientSelect.value,
        hiddenFieldValue: hiddenField.value,
        tomSelectValue: window.recipientTomSelect ? window.recipientTomSelect.getValue() : null
    };
    
    // 透過 fetch 發送除錯資訊
    fetch('/api/debug-form', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(debugData)
    }).then(() => {
        console.log('[FORM DEBUG] 除錯資訊已發送，準備提交表單...');
        // 延遲一點點後提交表單
        setTimeout(() => {
            document.querySelector('form').submit();
        }, 200);
    }).catch(error => {
        console.error('Debug sending failed:', error);
        // 即使除錯失敗也要提交表單
        document.querySelector('form').submit();
    });
}

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);
            // 更新隱藏字段
            updateHiddenField();
        },
        onItemRemove: function(value) {
            // 移除項目時更新隱藏字段
            updateHiddenField();
        },
        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>`;
            }
        }
    });
    
    // 將 Tom Select 實例儲存到全域變數以便偵錯
    window.recipientTomSelect = recipientSelect;
});
</script>
{% endblock %}