---

{% extends "base.html" %}
{% block content %}
<div class="card">
    <div class="card-title">
        <i data-lucide="settings"></i>
        Установление/снятие доплат/надбавок (9999)
    </div>
    
    <form method="POST" action="/note/allowance">
        <input type="hidden" name="payment_code" value="9999">
        
        <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label>Номер документа</label>
                <input type="text" name="doc_number" class="form-control" placeholder="Например: 47">
            </div>
            <div class="form-group">
                <label>Дата документа</label>
                <input type="date" name="doc_date" class="form-control" required>
            </div>
        </div>
        
        <div class="form-group">
            <label>Основание</label>
            <textarea name="base_reason" class="form-control" rows="2"></textarea>
        </div>
        
        <hr>
        
        <div class="form-group">
            <label>Поиск сотрудника</label>
            <div style="display: flex; gap: 0.5rem;">
                <input type="text" id="employeeSearch" class="form-control" placeholder="Фамилия или таб. №">
                <button type="button" id="searchBtn" class="btn btn-primary">Найти</button>
            </div>
            <div id="searchResults" style="display: none; border: 1px solid #ddd; margin-top: 0.5rem; max-height: 200px; overflow-y: auto;"></div>
        </div>
        
        <div class="form-group">
            <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label>Период с:</label>
                    <input type="date" id="globalStartDate" class="form-control" style="width: 150px;">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label>по:</label>
                    <input type="date" id="globalEndDate" class="form-control" style="width: 150px;">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label>Статус:</label>
                    <select id="globalStatus" class="form-control" style="width: 150px;">
                        <option value="установление">Установление</option>
                        <option value="снятие">Снятие</option>
                    </select>
                </div>
                <button type="button" id="applyGlobalBtn" class="btn btn-warning">Применить ко всем</button>
            </div>
        </div>
        
        <table class="data-table" style="margin-top: 1rem;">
            <thead>
                <tr>
                    <th>Таб.№</th>
                    <th>ФИО</th>
                    <th>Надбавка/доплата</th>
                    <th>Код ВО</th>
                    <th>Ед.изм.</th>
                    <th>Размер</th>
                    <th>Статус</th>
                    <th>Период</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <tr id="emptyRow">
                    <td colspan="9" style="text-align: center; color: #888;">Добавьте сотрудников через поиск</td>
                </tr>
            </tbody>
        </table>
        
        <div style="margin-top: 2rem; display: flex; gap: 1rem;">
            <button type="submit" class="btn btn-success">
                <i data-lucide="save"></i> Сохранить служебную записку
            </button>
            <a href="/" class="btn btn-primary">
                <i data-lucide="arrow-left"></i> На главную
            </a>
        </div>
    </form>
</div>

<script>
    let employeesList = [];
    
    document.getElementById('searchBtn').addEventListener('click', async () => {
        const query = document.getElementById('employeeSearch').value;
        if (query.length < 2) {
            alert('Введите минимум 2 символа');
            return;
        }
        
        const response = await fetch(`/api/employees/search?q=${encodeURIComponent(query)}`);
        const data = await response.json();
        const resultsDiv = document.getElementById('searchResults');
        resultsDiv.innerHTML = '';
        
        if (data.length === 0) {
            resultsDiv.innerHTML = '<div style="padding: 0.5rem;">Ничего не найдено</div>';
        } else {
            data.forEach(emp => {
                const div = document.createElement('div');
                div.textContent = `${emp.tab_no} - ${emp.full_name} (${emp.department})`;
                div.style.padding = '0.5rem';
                div.style.cursor = 'pointer';
                div.style.borderBottom = '1px solid #eee';
                div.onclick = () => {
                    employeesList.push(emp);
                    renderTable();
                    resultsDiv.style.display = 'none';
                    document.getElementById('employeeSearch').value = '';
                };
                resultsDiv.appendChild(div);
            });
        }
        resultsDiv.style.display = 'block';
    });
    
    function renderTable() {
        const tbody = document.getElementById('tableBody');
        const emptyRow = document.getElementById('emptyRow');
        
        if (employeesList.length === 0) {
            if (!emptyRow) {
                tbody.innerHTML = '<tr id="emptyRow"><td colspan="9" style="text-align: center; color: #888;">Добавьте сотрудников через поиск</td></tr>';
            }
            return;
        }
        
        if (emptyRow) emptyRow.remove();
        
        tbody.innerHTML = '';
        employeesList.forEach((emp, idx) => {
            const row = tbody.insertRow();
            row.innerHTML = `
                <td>${emp.tab_no}<input type="hidden" name="employee_id" value="${emp.id}"></td>
                <td>${emp.full_name}</td>
                <td><input type="text" name="allowance_name" class="form-control" placeholder="Наименование надбавки"></td>
                <td><input type="text" name="allowance_code" class="form-control" placeholder="Код ВО" value="1084"></td>
                <td><select name="unit" class="form-control"><option value="%">%</option><option value="руб">руб</option></select></td>
                <td><input type="number" name="amount" step="0.01" class="form-control" placeholder="Размер"></td>
                <td><select name="status" class="form-control"><option value="установление">Установление</option><option value="снятие">Снятие</option></select></td>
                <td><input type="date" name="start_date" class="form-control" style="min-width: 120px;" value="${getGlobalStartDate()}"><br><input type="date" name="end_date" class="form-control" style="min-width: 120px;" value="${getGlobalEndDate()}"></td>
                <td><button type="button" class="btn btn-danger" style="padding: 0.2rem 0.5rem;" onclick="removeRow(${idx})"><i data-lucide="trash-2"></i></button></td>
            `;
        });
        lucide.createIcons();
    }
    
    function getGlobalStartDate() { return document.getElementById('globalStartDate').value; }
    function getGlobalEndDate() { return document.getElementById('globalEndDate').value; }
    
    document.getElementById('applyGlobalBtn').addEventListener('click', () => {
        renderTable();
    });
    
    function removeRow(idx) {
        employeesList.splice(idx, 1);
        renderTable();
    }
    
    document.addEventListener('click', function(e) {
        if (!document.getElementById('searchBtn').contains(e.target) && 
            !document.getElementById('employeeSearch').contains(e.target)) {
            document.getElementById('searchResults').style.display = 'none';
        }
    });
</script>
{% endblock %}